The One with the Thoughts of Frans

Inputs that say things like “search here” are generally messed up. In this post I will first explain why and then I will show you how to do it properly.

Ignore everything that follows, other than perhaps the text about what not to do. You should now use <input placeholder="some text">, as HTML 5 support is now sufficiently common. Also note that the placeholder attribute typically isn’t sufficient by itself.

The WordPress theme I’m modifying for my wife had the following HTML in it:

<input type="text" value="Search this site" onfocus="if (this.value == 'Search this site') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site...';}" name="s" id="searchbox" />

There are three main problems with this.

1. It prefills the search box with “Search this site.” This is incredibly annoying and obnoxious behavior for people with Javascript disabled. If you must add such text, add it through Javascript.
2. The values don’t even match up, so if you focus on the INPUT, deselect it and select it again the text stays there. Even for users with Javascript enabled. Errors of this type could easily be avoided if the text value were stored in a variable.
3. Which brings me to the third problem. The script should be external so it can be cached. That would save bandwidth for both you and your visitors and if there are people with Javascript disabled, they won’t even have to load the junkscript once.

Because just about every such box I have ever encountered is complete and utter crap (this is actually one of the better ones), I decided to reproduce its functionality in an unobtrusive manner, eliminating all of the mistakes I outlined above.

The HTML is now reduced to this:

<input name="s" id="searchbox"/>

You could remove the trailing slash if you’re writing HTML, or put a space in between if that’s the way you write XHTML, but that’s of no consequence otherwise. The type="text" is not essential because it’s the default, but it shouldn’t hurt to leave it in. Also see Anne van Kesteren’s Optimizing Optimizing HTML for some tips on going somewhat over the top with minimalism.

The Javascript that changes the text to “Search this site…” is now in an external file:

(function() {
	function searchbox_text_change() {
		var s = document.getElementById('searchbox');
		var s_text = 'Search this site...'
		if (s.value == '') s.value = s_text;
		else if (s.value == s_text) s.value = '';
	}
	document.addEventListener('DOMContentLoaded',
	function(){
		var s = document.getElementById('searchbox');
		searchbox_text_change();
		s.addEventListener('focus', searchbox_text_change, false);
		s.addEventListener('blur', searchbox_text_change, false);
	},
	false);
})();

All of this took me about five minutes. There’s a tiny bit of redundancy going on, but I can’t be bothered to fix that. It’s superior to just about any stupid such script I ever encountered and likely to most of the same type that I will encounter in the future. Use this script as much as you please. You don’t even have to link back to me, since I just want those bloody things to work in a way that doesn’t make me cringe.

The same kind of principle applies to autofocus junk. Never ever do any such thing if I started typing something. I’d rather you never did it at all, but if you really feel that you must do it for some masochistic reason, at the very least check if the value is still empty with if (s.value=='').