updated mooInputLabel class for MooTools

I have taken the advice of 2 contributors to my original post (red link below), and have finally posted an update to this MooTools class that…

adds the ability to set the blur and focus colors in the options
sets the reusable reference to the element in the label class

So, without any further explanation, here’s the new code/instructions…

mooInputLabel

1 – copy and paste the following code into your favorite text editor and save it as a new .js file (“mooInputLabel.js”, for example)…

var mooInputLabel = new Class({

Implements: [Options, Events],

     options: {
          inputs: [ ],
          blurColor: '#ccc',
          focusColor: '#000'
     },

initialize: function(options) {
this.setOptions(options);

          var self = this;
          var inputs = this.options.inputs;
          var blurColor = this.options.blurColor;

this.blurColor = blurColor;
this.focusColor = this.options.focusColor;

          inputs.each(function(e) {
               e.addEvent('focus', function() {
                    e = new Event(e).stop();
                    self.inputFocus(this, e.id);
               })
               .addEvent('blur', function() {
                    e = new Event(e).stop();
                    self.inputBlur(this, e.id);
               })
               .setProperty('value', e.id)
               .setStyle('color', blurColor);
          });
     },

     inputFocus: function(x, id) {
          if (x.value == '') {
               x.value = '';
          }
          x.setStyle('color', this.focusColor);
     },

     inputBlur: function(x, id) {
          if (x.value == '') {
               x.value = id;
               x.setStyle('color', this.blurColor);
          }
          else if (x.value == id) {
               x.setStyle('color', this.blurColor);
          }
          else {
               x.setStyle('color', this.focusColor);
          }
     }
});

2 – then, make sure to place links to your new .js file as well as the MooTools core in the <head> of your document

<script type="text/javascript" src="mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="mooInputLabel.js"></script>

3 – add the appropriate code to each <input> tag on the page that you want to use this feature – example(s)…

<input type="text" id="username" class="label" />
<input type="text" id="password" class="label" />

* the “label” class signifies this input field as one that uses this feature.
The “id” is also the text used as the “label” value.

4 – finally, we add a MooTools “domready” event to the page to set everything up once the page has completed loading and the DOM is ready. The following code will apply our new feature to all <input> elements with a class of “label”…

window.addEvent('domready', function() {
     new mooInputLabel({
          inputs: $$('input.label')
     });
});

working example:

Click here to view the original article

November 14, 2009 | Filed Under JavaScript, MooTools | 4 Comments