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.

    • Mike Locke

      You rock! ~ Thanks

    • Mike Locke

      For the record, this is the code/syntax that I’m using:

      <input type=”text” name=”Search” class=”searchbox” onfocus=”if(this.value == ‘Search Artist’) { this.value = ”; }” onblur=”this.value=!this.value?’Search Artist’:this.value;” value=”Search Artist” />

      Works great!

  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 ↓
  15. punithan

    thanks its usefull stuff!!!

    Reply ↓
  16. cat

    I’m using this in my form:

    input name=”example” type=”text” id=”example” value=”example” onFocus=”if(this.value == ‘example’) {this.value = ”;}” onBlur=”if (this.value == ”) {this.value = ‘example’;}”

    … what do I do to not have this “example: example” sent to recipient email if not filled in?

    Thank you for all this usefull help!
    (new to this)

    Reply ↓
  17. paolo

    function change(i){
    if(i.value == ”){ i.value = ‘Search…’; }
    }
    function change2(i){
    if(i.value == ‘Search…’){ i.value = ”; }
    }

    this is my version and is so simply and nice :

    Reply ↓
  18. Scott Glime

    Wow, this was just what I was looking for. It worked perfectly for me!
    Thanks!

    Reply ↓
  19. Wayne Gomez

    can you change another element like div or ul if you focus on a textbox?

    I wanna change my li width if I focus on my textbox

    Home
    About
    Contact <—change this width

    <– if this is focused

    Reply ↓
  20. Vajrasar

    nice one. But I want to do something like your Contact Form. Like when someone is not in text bix then it should display watermark image, when we enter text, image goes out. But if someone leaves the text box empty, then the watermark comes back. ?

    Reply ↓
  21. Artem

    It works onfocus, and onblur.
    You just should keep your default string in the “name” attribute.
    I used jQuery just to get the elements or attributes, but you can also use standard techniques such as “getElementBy***”.

    $(‘input’).focus(function(){
    if($(this).val()==$(this).attr(“name”)){
    $(this).val(“”);
    $(this).css(“color”,”#141310″);
    }
    $(this).blur(function(){
    if($(this).val()==”"){
    $(this).val($(this).attr(“name”));
    $(this).css(“color”,”#9A9A9A”);
    }
    });
    });

    Reply ↓
  22. Vajrasar

    thanks @Artem. Just got it all figured out yesterday, using the same and implemented it in the top-bar of website.

    http://www.udaipurtimes.com

    Thanks for the reply, mate. :)

    Reply ↓
  23. tasneem

    Hi
    I want to do this on a form built by webform module of Drupal7. Because this is built by the module, I cannot add the jscript tags of onblur or onfocus to the text fields. The site is not online, so cannot post the url here.
    Please help me on how to do this. If this is possible by php, that would be OK too, as I have the main template.php file with me. But I would prefer jquery.
    thanks

    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 ~