Your open source for Development and Design

JavaScript Input box control

Filed under: JavaScript — Tags: , , , — Adi @ 2:50 pm January 12, 2009

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.


Switch to our mobile site