MooTools Form Field Default Plugin

By  on  

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.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

  • By
    Multiple Backgrounds with CSS

    Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came...

Discussion

  1. Michael

    David, you’ve proved it once again.

    You’re the sh*t.

    Thanks for this post. Perfect timing.

    Michael

  2. where is the example?

    we want example :D

  3. Martin Lundgren

    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!

  4. I suggest using the alt-attribute. it works fine on every browser and validates.

  5. Bradley

    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.

  6. 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 : )

  7. Why aren’t you just using the defaultValue of the input text boxes?
    link text

  8. it works fine on every browser and validates.

  9. I suggest using the alt-attribute. it works fine on every browser and validates.

  10. I agree with the other comments about not using the rel attribute. In any case, decent little snippet.

  11. I just wan to point out that the input element does not have a rel attribute.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!