A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > JavaScript > Clear Field on Focus Submit one!

Clear Field on Focus

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

Replace “value” with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it’ll be left alone.

Alternatively, use onfocus=”this.value=”;” to always clear the field.

3 Responses

  1. What about having ONBLUR as well? Just in case the user doesn’t enter anything and leaves the field.

  2. Sorry, my code did not show up. Let me try again…

  3. Eric says:

    What if the field is connected to a table and the iput field is pre defined?

    Example: I have a field “S” that comes up null in a web page, the user makes a mistake and instead of going back and highlighting and deleting they could just click the reset button. If I use input type=”text” it just creates another blank field. I want it to reference the predefined field.

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.