What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » JavaScript » Clear Field on Focus

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. Dennis M Dewey

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

    Reply ↓
  2. Dennis M Dewey

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

    Reply ↓
  3. Eric

    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.

    Reply ↓
  4. Sheffield Website Design

    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

    Reply ↓
  5. Jonny

    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 :)

    Reply ↓
    • Jonny

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

      I ment to put

      Script type=”"
      /script

      But with

  6. William

    Saved my ass!

    Reply ↓
  7. Grateful

    Thanks so much for this! Very useful. :)

    Reply ↓
  8. Salim Bensiali

    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;
    });

    Reply ↓
  9. Web designer

    Finally got both working. Onblur and onFocus. Thanks Chris!

    Reply ↓
  10. Unkulunkulu

    Actually at least for jQuery 1.6.2. the generic snippet should look like this:

    
var el = $('input[type=text], textarea');
    el.focus(function(e) {
        if (e.target.value == e.target.defaultValue)
            e.target.value = '';
    });
    el.blur(function(e) {
        if (e.target.value == '')
            e.target.value = e.target.defaultValue;
    });

    Or if you want to use $(this), it should be $(this)[0] but that looks ugly.

    Reply ↓
  11. Mike Locke

    Thanks, this is clean and simple.

    Question – How do you set the onblur so that the value stays or appears back in the field if the user decides not to type anything? ~ thanks

    Reply ↓
    • Jamal

      This is the code I use, it does exactly what you’re asking:

      input type=”text” value=”First Name” name=”fname” class=”text_field” onfocus=”if (this.value == ‘First Name’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘First Name’;}”

      Fore textareas….

      textarea name=”message” class=”text_area” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” cols=”72″ rows=”11″>Type your message here…

      Sorry for the lack of brackets, I don’t know how to insert code here.

  12. Nanospeck

    Thanks. Very helpful.!

    Reply ↓
  13. Elijah Clark

    does this work on form fields. i currently have the field at onfocus=”cl(this) – works for removing the text, but not for adding it back

    Reply ↓
  14. Michael

    how to make the default value into color gray??

    Reply ↓

Speak, my friend

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 ~