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. User Avatar
    Dennis M Dewey
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Dennis M Dewey
    Permalink to comment#

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

  3. User Avatar
    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. User Avatar
    Sheffield Website Design
    Permalink to comment#

    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

    • User Avatar
      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”

    • User Avatar
      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. User Avatar
    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 :)

    • User Avatar
      Jonny
      Permalink to comment#

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

      I ment to put

      Script type=””
      /script

      But with

  6. User Avatar
    William

    Saved my ass!

  7. User Avatar
    Grateful

    Thanks so much for this! Very useful. :)

  8. User Avatar
    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. User Avatar
    Web designer
    Permalink to comment#

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

  10. User Avatar
    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.

    • User Avatar
      Herbi
      Permalink to comment#

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

  11. User Avatar
    Mike Locke
    Permalink to comment#

    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

    • User Avatar
      Jamal
      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.

    • User Avatar
      Mike Locke

      You rock! ~ Thanks

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

    Thanks. Very helpful.!

  13. User Avatar
    Elijah Clark
    Permalink to comment#

    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. User Avatar
    Michael
    Permalink to comment#

    how to make the default value into color gray??

  15. User Avatar
    punithan
    Permalink to comment#

    thanks its usefull stuff!!!

  16. User Avatar
    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. User Avatar
    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 :

    • User Avatar
      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. User Avatar
    Scott Glime
    Permalink to comment#

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

  19. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Kevin
    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. User Avatar
    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.

    • User Avatar
      Paul Clapp
      Permalink to comment#

      placeholder= works well but isn’t cross browser compatible.

  27. User Avatar
    Diego
    Permalink to comment#

    Thanks, was very helpful!

  28. User Avatar
    Evan

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

    • User Avatar
      Marinda

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

  29. User Avatar
    Marinda

    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. User Avatar
    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

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

    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    Rohit

    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. User Avatar
    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 ..

  35. User Avatar
    mark
    Permalink to comment#

    to clear on focus and will put the value back if nothing is entered on unfocus

    value=”First Name” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”

  36. User Avatar
    Lee Foot
    Permalink to comment#

    to clear on focus and will put the value back if nothing is entered on unfocus

    value=”First Name” onfocus=”if(this.value==this.defaultValue)this.value=”;”
    onblur=”if(this.value==”)this.value=this.defaultValue;”>

    Just tested and this works. Very helpful, thanks for sharing.

    • User Avatar
      Pro
      Permalink to comment#

      how to use this way once that my input is server side :

    • User Avatar
      Pro
      Permalink to comment#

      how to use this way when my input is server side .
      because i want get textbox value in Code-behind.

  37. User Avatar
    luc
    Permalink to comment#

    clearText = function(field){
    field.value = ”;
    field.onfocus = function() {};
    }

    and
    onfocus=’clearText(this);’

    only remove (simply) first initialisation !

  38. User Avatar
    Square Apple
    Permalink to comment#

    Yeah great with onblur on an opt in form. Thanks.

  39. User Avatar
    Christina
    Permalink to comment#

    Don’t ever clear the field on focus! It makes it impossible to correct a spelling mistake once the field has been blurred without rewriting everything. Instead just select all on focus and the user can chose between just type and replace the content or change the selection and only modify parts of it.

    Also never select the whole field on click. It prevents users from selecting within the field. If you want all text to be selected do it on focus.

  40. User Avatar
    Praveen
    Permalink to comment#

    I am subscriber to wufoo form. I created a form and added a predefined value. When I click on the field the text remains and it has to be deleted by using backspace. Is there any way I can delete it using css or add script to the form.
    Thanks

  41. User Avatar
    HOPE
    Permalink to comment#

    these matters into his own hands as they hope CSS
    In case we do not want to use JavaScript
    necessary

    a:hover[input:value].after {
    content:"";
    }
    a:hover[input:value].before {
    content:"please enter bla bla";
    }
    
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag