Giving the Users JavaScript Hints for Input Fields

It is very common for BI applications to have plenty of data input. Whether it is a budgeting, forecasting or actuals reporting system. Or whether you are dealing with financial data, controlling data or marketing data many requirements are identical from the technical perspective. The ergonomy of an input mask is a key factor to its acceptance by end-users, so it is always necessary to make them as easy as possible to fill in.

To meet this goal, it is very common to use hints or tips for the various input fields. One of the most elegant ways of doing so is to have a sample filled into the field to remove any ambiguity. As soon as the user clicks into the field, the sample vanishes making room for the entry of the end user.

The result looks like what you see below, try it out.

When you click into the text box the hint vanishes and the user can enter their own name.

The beauty of this is that it is quite simple to implement using the onFocus event:

<form name="form1" method="post" action="">
< input type= "text" name="textfield" onFocus="this.value=''" value="Name">
< /form>

There are several extensions to this principle that will be published in future scripts.

previous tip | next tip