Question

Text in HTML Field to disappear when clicked?

I can easily create a html input field that has text already in it. But when the user clicks on the input field the text doesn't disappears but stays there. The user then has to manually remove the text to type. How can I create an input field where when the user clicks on the input field box the text then disappear?

 45  206356  45
1 Jan 1970

Solution

 173

What you want to do is use the HTML5 attribute placeholder which lets you set a default value for your input box:

<input type="text" name="inputBox" placeholder="enter your text here">

This should achieve what you're looking for. However, be careful because the placeholder attribute is not supported in Internet Explorer 9 and earlier versions.

2011-02-22

Solution

 22

To accomplish that, you can use the two events onfocus and onblur:

<input type="text" name="theName" value="DefaultValue"
  onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
  onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
  style="color:#BBB;" />
2009-10-26