Auto disappear input message

Have you ever wanted to create a contact form or even a newsletter registering form that has a default text value within the text box, but automatically disappears when the user clicks on it?Follow this tutorial and you will find out how simple it really is!

The method that will be used to do this is a simple onfocus event handler which will change the input value to nothing when the user goes to enter text.

Caution this may not be user friendly if the user would like to correct an entered value as it will be removed when the input tag is focused on

Online Example

If you would like an online example, check out my feedburner subscription box on the right or the search at the very top right.

Step 1 – Input tag

Firstly you will have to create an input tag (if you havent done so already), with a value e.g. “Please enter full name”.

Example:

Step 2 – onfocus event handler

Lastly add an onfocus event handler to the input tag, assigning the this.value to nothing.

Example:

Result

And that’s it! you should now have a text box that like this

Additional functionality

If you would also like the message to re-appear if no text had been entered, you will need to add the onblur event handler.

Result

Thanks for reading please feel free to leave a comment