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.


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

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

      comment portion

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

  2. Dennis M Dewey
    Permalink to comment#

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


    • 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=””

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

    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 ( ==
       = '';
        el.blur(function(e) {
            if ( == '')

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

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

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

    Thanks. Very helpful.!

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

    how to make the default value into color gray??

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




      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!

  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

    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***”.


  22. Vajrasar

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

    Thanks for the reply, mate. :)

  23. tasneem

    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.

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


    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?


  26. Dreamonic
    Permalink to comment#

    Why don’t you use the placeholder attribute? f.e. <br/>
    < input placeholder=”Hello world!” />
    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.

    • Paul Clapp
      Permalink to comment#

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

  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.

    • Marinda

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

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


    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,

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

  35. 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. 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=”;”

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

    • Pro
      Permalink to comment#

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

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

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


    only remove (simply) first initialisation !

  38. Square Apple
    Permalink to comment#

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

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

  41. HOPE
    Permalink to comment#

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

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.