Default Search Input Message — Show & Replace

Search functionality is an important part of any large website. Search functionality can save an unorganized website from losing visitors -- I'll search for information if I know it's there. Search functionality can also your users a number of clicks even if your website is organized.

We hope that it's fairly obvious to a web user that an input box followed by a search icon symbolizes a search box. Unfortunately, making assumptions on the web isn't a luxury that web developers have. One way to make your search bar more obvious is to place some default text in the input box.

Framework Independent JavaScript

MooTools JavaScript

window.addEvent('domready',function() {
	var t = $('s');
	t.addEvents({
		'focus': function() { t.value = (t.value == 'search...' ? '' : t.value); },
		'blur': function()  { t.value = (t.value == '' ? 'search...' : t.value); }
	});
});