Vishnu Gopal

Self-labeling text entry INPUT boxes using Prototype JS

Like previous code snippets, this one is mostly all code and no explanation.

A brief primer: you’ve often seen self-labeling input boxes, the ones that display a label inside in gray text, and when you click replaces with an empty input element using Javascript. This is a simple class to help you achieve that effect:

SelfLabelingBox = {
	initialize: function(box_id, message) {
		this.setup_behavior(box_id, message);
	},

	setup_behavior: function(box_id, message) {
		box_id = $(box_id);
		if(box_id) {
			if(box_id.value == '') {
				box_id.value = message;
				box_id.addClassName('inactive');
			}
			Event.observe(box_id, 'focus', function() {
				if(box_id.value == message) {
					box_id.value = '';
					box_id.removeClassName('inactive');
				}
			});
			Event.observe(box_id, 'blur', function() {
				if(box_id.value == '') {
					box_id.addClassName('inactive');
					box_id.value = message;
				}
			});
		}
	}
};

SetupDefaultInputs = {
	initialize: function() {
		Event.observe(document, 'dom:loaded', this.setup_default_inputs);
	},

	setup_default_inputs: function() {
		SelfLabelingBox.initialize('search_text', 'Search');
	}
};

Until next time!

In

, , ,

2 responses

  1. vishnugopal Avatar
    vishnugopal

    Matt: Cool stuff!

    Cheers,
    Vishnu

    Reply
  2. Matt Ganderup Avatar
    Matt Ganderup

    I found your code and modified it to make it more ‘prototype-y’. Here’s what i came up with:

    Element.addMethods('input', {
  addAutoLabel: function(element, message){
    element = $(element);
    if(element) {
      if(element.value == '' || element.value == message) {
        element.value = message;
        element.addClassName('inactive');
      }
      Event.observe(element, 'focus', function() {
        if(element.value == message) {
          element.value = '';
          element.removeClassName('inactive');
        }
      });
      Event.observe(element, 'blur', function() {
        if(element.value == '' || element.value == message) {
          element.addClassName('inactive');
          element.value = message;
        }
      });
    }
  }
});
Array.prototype.addAutoLabel = function(message) {
    this.each(function(e){e.addAutoLabel(message);})
}

    then to add it to a field (or fields) you invoke:

    $('element').addAutoLabel('automatic label');

    or

    $$('input.someclass').addAutoLabel('automatic label');
    Reply

Leave a Reply

Create a website or blog at WordPress.com