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

comments

4 Responses to “updated mooInputLabel class for MooTools”

defaultValueActsAsHint for MooTools : dustincaruso.com on November 14th, 2009

[...] updated mooInputLabel class for MooTools [...]
genuine essay on November 26th, 2009

This is really useful information for me. Thank you for your nice article!
Ryan on December 8th, 2009

Hi there, id really like to use this script, but for some reason its playing up on my site, its populating the fields with the ID as intended, however on focus its leaving the ID there and then changing it to the second color as intended. If i delete the ID from the box then blur, it changes to undefined in the first color specified.

Ive cleared all possible conflicting scripts and am not getting any errors in firebug… any suggestions? Also is it possible to use this on textareas?
admin on December 22nd, 2009

Hi Ryan,
I’d be happy to take a quick look if you can send me the url to a test page where you’ve attempted to implement this class.

let me know…

- dustin