defaultValueActsAsHint for MooTools

Click here to view my newer post with an updated class and new code

I just got done reading a great article on Ajaxian about Thomas Fuchs’ new JavaScript creation – defaultValueActsAsHint. It’s best described in his words…

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing is entered, the hint will be shown once again once the user leaves it.

Then it hit me. We’ve been doing this in schmedley for quite some time now in several of our schmidgets (Facebook, MySpace, Twitter, Sticky Note, To-Do List, Bookmarks and POP3/IMAP4 Email). It makes perfect sense that widget development would make good use of this User Interface Pattern, as screen real estate in a widget is extremely limited. There is no point in making space for “labels” for text input fields when you can put that text directly IN the field.

So – to make a long story short – I decided to do as Thomas has done and share my little JavaScript tidbit with the world. My version will be in the form of a MooTools class (since that is the framework that powers schmedley).

I’ve named it…

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: [ ]
     },

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

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

          inputs.each(function(e) {
               e.addEvent('focus', function() {
                    self.inputFocus(e.id);
               })
               .addEvent('blur', function() {
                    self.inputBlur(e.id);
               })
               .setProperty('value', e.id)
               .setStyle('color', '#ccc');
          });
     },

     inputFocus: function(x) {
          if ($(x).value == x) {
               $(x).value = '';
          }

$(x).setStyle('color', '#000');
},

     inputBlur: function(x) {
          if ($(x).value == '') {
               $(x).value = x;
               $(x).setStyle('color', '#ccc');
          }
          else if ($(x).value == x) {
               $(x).setStyle('color', '#ccc');
          }
          else {
               $(x).setStyle('color', '#000');
          }
     }
});

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.1.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 my newer post with an updated class and new code

January 14, 2009 | Filed Under JavaScript, MooTools

comments

4 Responses to “defaultValueActsAsHint for MooTools”

CroNiX on January 14th, 2009

Very cool. To make it more configurable and reusable, I would add the ability to set the various colors in the options.
chris on January 15th, 2009

just a little tip…

instead of always referencing to the input field with $(x) you should save it in the Label Class and the reference to it with this.x … i think that might be a bit more performant than having always the $ function called to find the input element…

btw just an idea
admin on November 14th, 2009

I have taken the advice of the 2 contributors above and have finally posted an update to this mootools class that…

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

look for the link to the new code/post above in red,
and in the next comment below…

Best,
Dustin
updated mooInputLabel class for MooTools : dustincaruso.com on November 14th, 2009

[...] defaultValueActsAsHint for MooTools [...]