Nov 13
One common web user interface pattern that grinds my gears is search input box clearing. Examples can be found while browsing Major League Baseball players or using the top-right search functionality of Shacknews. The box displays a message welcoming you to search and when you click it, the box clears so you can enter your terms. The problem is most major sites implement this incorrectly. What happens when you type in one term and want to concatenate some more terms through copy and paste? When I refocus the box, my previous search term should not be cleared! Do it proper, a’ight?
<?php $defaultSearchTerm = 'Enter search term...'; ?> <input type="text" name="searchTerm" value="<?php echo $defaultSearchTerm ?>" onfocus="if(this.value == '<?php echo $defaultSearchTerm ?>') this.value = ''" /> ...
I think there’s some other circumstances where this can go wrong – one other think you can do is to have a graphic of the default text and clear the background on focus, something like
input { background: url(something.png); }
input.focus { background: none; }
or whatever.