JavaScript Input box control

Twitter Facebook Pinterest Google+ Stumbleupon LinkedIn

The idea behind this was to aid design and usability by adding a label inside the input box to give an indication of what it was for. It might not be a search box, maybe you want to add labels for name and address boxes who knows.

Click the input box below and see how the “search” disappears leaving it empty for the user to edit. If the user clicks and clicks off leaving it empty the label will return to “Search”

Here is how it works.

A basic Javascript function to control the input box called “test” This function basicaly says. Check if the box is empty, if it is make it’s value “Search”.
The input box also calls Javascript “onclick” to clear the input and “onblur” to call the function below.

Posted by Adi on January 12, 2009

Twitter Facebook Pinterest Google+ Stumbleupon LinkedIn