Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

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

    • Hassaan
      Permalink to comment#

      function clearText(field){
      if(field.defaultValue == field.value){
      field.value = “”;
      }
      else if(field.value == “”){
      field.value = field.defaultValue;
      }
      }

      if we have many input, textarea. It works for both on focus and blur.
      As;

      comment portion

      It is very simple. Only we define a script and put it in head.

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

  3. Eric
    Permalink to comment#

    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

    • Jaime
      Permalink to comment#

      thanks for the add Sheffield! … I inserted your “onblur” code in there and found it didn’t work for me… but then I noticed that the “curly brackets” needed to be tweaked in order for it to work for me:

      onblur=”if(this.value == ”) { this.value = ‘value’; }” value=”value”

    • Kento
      Permalink to comment#

      @Jamie – Sheffield’s Line just has a little typo. He had one double quote where there should be a single quotes.

      Do this:

      onblur="if (this.value == 'yourValue') { this.value = ''; }" value="yourValue"

      Instead of this:

      onblur=”if(this.value == ”) { this.value = ”; }” value=”value”
  5. Jonny
    Permalink to comment#

    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
      Permalink to comment#

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

      I ment to put

      Script type=””
      /script

      But with

  6. William

    Saved my ass!

  7. Grateful

    Thanks so much for this! Very useful. :)

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

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

  10. Unkulunkulu
    Permalink to comment#

    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.

    • Herbi
      Permalink to comment#

      I was messing my script for input text, but yours here was very helpfull. Thanks!

  11. 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

    • Permalink to comment#

      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.

    • You rock! ~ Thanks

    • 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. Permalink to comment#

    Thanks. Very helpful.!

  13. 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

  14. Michael
    Permalink to comment#

    how to make the default value into color gray??

  15. Permalink to comment#

    thanks its usefull stuff!!!

  16. cat
    Permalink to comment#

    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)

  17. paolo
    Permalink to comment#

    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 :

    • Lisas4athotmail
      Permalink to comment#

      it looks very clean and logic, but where to place it. I have a ccs contact site,
      and I can make none to work.
      I just want the names: “Name, Email, and content appear grey inside the boxes, but for some reason non of the examples given work.
      this is my html:

      Name: 

      Email:  
      Comments:

       

      this is my css:
      form {
      /*margin: 20px 0 0 40px;*/
      font-family: Verdana;
      font-style : normal ;
      font-size : 0.865em;
      font-weight :550;
      text-align : left;
      color: #000000}

      input { margin: 4px;
      max-width: 100% }

      textarea {
      max-width: 100%
      }

  18. Scott Glime
    Permalink to comment#

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

  19. Wayne Gomez
    Permalink to comment#

    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

  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. ?

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

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

  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

  24. muhammad khan
    Permalink to comment#

    i wanna help
    if user enter number on box then another box will be focus how can i do

  25. Permalink to comment#

    Hi,

    This is great thanks! One question though . . . the page defaults pass through the form validation (the form can be submitted with the default values) . . . Is there a string you can append so validators don’t recognize this as user value?

    KW

  26. Dreamonic
    Permalink to comment#

    Why don’t you use the placeholder attribute? f.e. <br/>
    <br/>
    < input placeholder=”Hello world!” />
    <br/>
    <br/>
    This sets the text in between quotes in the input field, as long as the user didn’t type anything. As soon as he starts typing, the text dissapears (hence placeholder).

    Note: If you want to clear the field on focus everytime (not just before the user has typed something already), the suggested solution may work better.

  27. Diego
    Permalink to comment#

    Thanks, was very helpful!

  28. Evan

    Paul Clapp, it’s 2013, ‘placeholder’ works in almost every browser and mobile device.

    • Evan, “placeholder” doesn’t work in Internet Explorer… (I don’t know why people still use it!)

  29. I managed to get my opt-in form to have this, so proud! Couldn’t have done it without this tip, thank you so much!

  30. Jason
    Permalink to comment#

    Hello!

    I am using an embedded form, therefore, I don’t have access to the html.

    I am trying to tweak the CSS code above to clear my form fields.

    Here is an example of my html code for a line item……..can someone please assist with the CSS code?

    Much appreciation,
    JK

    • Jason
      Permalink to comment#

      It didn’t take my code for some reason: Maybe I’ll leave out the “<”

      input type=”text” class=”hs-input” required=”required” name=”state” value=”state”

  31. I have a mini cart in the upper right of my page. After customers select the items they want to purchase off the page (there can be many selections), the items are passed to the mini cart, but the form does not clear. I have tried numerous javascripts to reset the input fields back to blank, but none seem to work. It has been suggested that another script is interfering, but I have no script errors on the page. The only script for the mini cart is a window.focus (). Could that be the issue?

  32. Dave
    Permalink to comment#

    After reading through posts at the snippets here I have pieced the following together which works great. I am my case I am using it for a simple search field.

    • Dave
      Permalink to comment#

      <input type="text" onfocus="if(this.value == 'Search This Site') { this.value = ''; }" class="form-control" onBlur="if(this.value == '') { this.value = 'Search This Site'; }" value="Search This Site">

  33. At the onset, I am a novice at website building and ALL my work is based on help from people and forums like you!
    I have been using the following function for my webforms:
    onfocus=”if(this.value==defaultValue) {this.value=”;}” onblur=”if(this.value==”) {this.value=defaultValue}”
    The problem is that the form-fields are getting validated with the default values, for eg. if the field is populated with “Name”, the visitor can proceed without entering his name in the form field despite it being a mandatory field. (You can check it on the contact form on the home page of http://www.kaamwaala.com).
    Can someone please help me with validation by suggesting required changes in the html code I have been using.
    Thanks…you will be a life saver here!

  34. Paul

    Hey I am trying to do this within a function, but it doesn’t work right.

    function prüfe_inhalt() {
    if (check()) {
    alert ("No same numbers allowed. Please type another number.");
    this.value ='';
    }
    }

    Now i have an

    It appears that “this” doesn’t refer to the input anymore ..

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".