bassistance.de

A very common yet annoying task in daily webdeveloping is to clear the text displayed in a search field, when the field is focused. And even better, the text should be restored when the user leaves the input field empty.

The naive approach uses inline onblur and onclick javascript, or maybe at least onblur and onfocus (handles both keyboard and mouse navigation). The inline script then checks for a certain value on focus, and deletes it, and restores that value on blur when the field is empty. Problematic is the hardcoded value: Once someone feels like the default value of the field should display something more helpful, the scripts have to be fixed, too.

At least this approached was used on this site for quite a long time. While I could blame the author of the original wordpress theme used here (or my lack of knowledge about DOM and JavaScript at that time), I’m trying to improve things, and share it.

So I went ahead, removed that ugly inline script, and added a bit jQuery magic:

$("#s").focus(function() {
	if( this.value == this.defaultValue ) {
		this.value = "";
	}
}).blur(function() {
	if( !this.value.length ) {
		this.value = this.defaultValue;
	}
});

The important idea here is to use “defaultValue”, as it provides the value as seen in the HTML markup, rather then the value entered by the user. So no matter what actual value is provided in the markup, the script works as intended. I’d call that “unobtrusive”.

While having unobtrusive scripts is great, reusing those scripts is even better. jQuery to the rescue, once more!

$.fn.search = function() {
	return this.focus(function() {
		if( this.value == this.defaultValue ) {
			this.value = "";
		}
	}).blur(function() {
		if( !this.value.length ) {
			this.value = this.defaultValue;
		}
	});
};
$("#s").search();

The transfer from a plain script to a reuseable plugin could hardly be any easier. The plugin is named “search”, contains nearly the same code as above, and is then applied to the search field (selected via id).

A confusing thing may be the use of “this”. Inside the plugin function, “this” refers to the jQuery object, here an object that wraps the input field with the idea “s”. The Firebug console would display it as “[input#s search]”. Square brackets because a jQuery object is, or rather pretends to be, an array, type of “input”, id of “s”, name of “search”.

Inside the two event handlers for “focus” and “blur”, “this” refers to the DOM element. Plain JavaScript events behave the same, therefore jQuery adopted that style of scope. In this case it is quite handy, because we can access both value and defaultValue properties directly.

Of course our last, or maybe even our first step should be to check if browsers really support both properties used here. To my humble knowledge, this is the case, and we don’t have to worry about any IE inconsistencies or Safari memory problems.