MooTools Form Field Default Plugin
One nice, subtle enhancement you can add to your website is a default input value that disappears when the user clicks into the field and reappears if the user leaves the field empty. It's rather easy to do, but I decided to create a MooTools class for it anyway.
The XHTML
<input type="text" class="defs" rel="Search here..." /> <input type="text" class="defs" rel="Email address" /> <input type="text" class="defs" rel="Like whoa!" />
Each field's default value will be whatever gets placed in the rel attribute.
The MooTools JavaScript Class
var dwDefaults = new Class({
//implements
Implements: [Options],
//options
options: {
collection: $$('input[type=text]')
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.defaults();
},
//a method that does whatever you want
defaults: function() {
this.options.collection.each(function(el) {
el.set('value',el.get('rel'));
el.addEvent('focus', function() { if(el.get('value') == el.get('rel')) { el.set('value',''); } });
el.addEvent('blur', function() { if(el.get('value') == '') { el.set('value',el.get('rel')); } });
});
}
});
For every item in the collection, we add focus and blur event that controls whether the item's message should be removed or shown.
The MooTools JavaScript Usage
window.addEvent('domready', function() {
var defs = new dwDefaults({
collection: $$('input.defs')
});
});
All you have to do is provide the collection!
There you have it! I would've done a jQuery plugin but it's already out there.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
David, you’ve proved it once again.
You’re the sh*t.
Thanks for this post. Perfect timing.
Michael
where is the example?
we want example :D
Hi Dave,
I just wan to point out that the input element does not have a rel attribute.
I wrote a class for the exact same thing about two weeks ago. I used the value attribute to store the default value. Then ondomready I attached the default value to the element with the MooTools store() and retrieve() methods and applied the functionality.
Thank you for a great site!
I suggest using the alt-attribute. it works fine on every browser and validates.
A nice enhancement to this script would be to also support password fields — since the value will show up as *, you have to create a new text input and hide the password input, and on-focus you swap them. I guess that could be a little bloaty if you aren’t going to use it for that, but it’s nice to have general-case solutions.
I agree with the other comments about not using the rel attribute. In any case, decent little snippet.
I was using a similar premise for a mootools validation script. For some reason I wanted it to validate but found the alt or rel attribute couldn’t be used. I decided to use the lang attribute and use underscores instead of spaces which are removed later. The lang attribute is common to most elements.
e.g. To get a different or nice name for a select box
[[select name="role_id" id="role_id" class="val_required" lang="Security_role"]]
Not sure why I needed it to validate – obsessive compulsive I think : )
Why aren’t you just using the defaultValue of the input text boxes?
link text
I’ve built more simple. See below
http://kodegeek.wordpress.com/2009/06/20/form-fields-default-value-using-mootools/
it works fine on every browser and validates.
I suggest using the alt-attribute. it works fine on every browser and validates.
I agree with the other comments about not using the rel attribute. In any case, decent little snippet.
I just wan to point out that the input element does not have a rel attribute.