A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » 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.

Subscribe to The Thread

  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.

  4. Thank you so much for this I know its a very basic command to add but I was struggling to find out why it wasn’t working, but I just copied and pasted yours and viola no problems!

    I also used the:
    onblur=”if(this.value == ”) { this.value = ”; }” value=”value”

    so that it goes back to the original if nothing is typed in!

    @mgpwr

  5. Jonny says:

    Sorry to sound really amateur…
    But.. I can’t seem to make this work, I’ve got a PHP Form, the PHP is in the page… and I dont know why it wont work.

    Do I need to do

    I’d appreciate if someone would help me out.
    Sorry for being such amateur on this :)

    • Jonny says:

      I dont know how to add Code into this post..

      I ment to put

      Script type=”"
      /script

      But with

  6. William says:

    Saved my ass!

  7. Grateful says:

    Thanks so much for this! Very useful. :)

  8. Salim Bensiali says:

    To be more generic, a la jquery:
    var el = $(“input[type=text], textarea”);
    el.focus(function(e) {
    if ($(this).value == $(this).defaultValue)
    $(this).value = “”;
    });
    el.blur(function(e) {
    if ($(this).value == “”)
    $(this).value = $(this).defaultValue;
    });

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---