Skip to main content
Home / Code Snippets / jQuery Code Snippets / Set/Clear Default Input Value
Avatar of Chris Coyier
Author
Chris Coyier
8 Comments
Join Conversation
Published

200+ popular business app integrations on MailChimp. 

$('.default-value').each(function() {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

});
Frontend Masters logo

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Comments

  1. User Avatar
    kartofelek
    Permalink to comment#

    This is very old snippet. Now you better use placeholder or equiwalent. And one important thing – whats about send value? You set the default, but sometimes this is wrong.

    Reply
    • User Avatar
      Andre
      Permalink to comment#

      Considering ‘placeholder’ is part of HTML5, this JS method would be a safe fall back for older browsers…

      Not sure what the problem with the ‘send value’ is though; if the field is empty this will apply the input tag’s default ‘value’, if the field is not empty then it holds whatever was entered.

  2. User Avatar
    Jason Day
    Permalink to comment#

    With my form, I have fields that are not required but have pre-filled value text as a usability hint. Several of these fields go through various types of validation (right number of characters, etc).

    How would i clear only the default value of those specific fields?

    example: 

    <input value="Enter promotion code" maxlength="40" title="Promotion Code 1">

    I need to clear the “Enter promotion code” on submit so that the value doesn’t go through validation and trigger an alert.

    Reply
    • User Avatar
      Andre
      Permalink to comment#

      If you are aiming at newer browsers (or if accommodating older browsers is not a problem) it would be better to set it up like this:
      [code][/code]

      Although, to use this JS method, include the provided script in your page and use the following:
      [code][/code]

    • User Avatar
      Andre
      Permalink to comment#

      My bad… Too used to forum code tags.

      For HTML5 ‘placeholder’ method:

      For JS ‘value’ method:

    • User Avatar
      Andre
      Permalink to comment#

      What the heck? Ok… Let’s just do it this way: For this JS method just add class=”default-value” to the input tag and leave everything else the way you have it.

    • User Avatar
      Jason Day
      Permalink to comment#

      Unfortunately, this has to work in ie6 as well. Currently I have a span underneath the input field to simulate the functionality. But I don’t want to do it that way.

      The two forms where I’m using this are one input forms. For the submit, would it be possible to throw out the default value using onclick or onsubmit?

  3. User Avatar
    Jeff Shamley
    Permalink to comment#

    Perfect! Exactly what I was looking for. Thanks for the snippets.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.

We have a
Code of Conduct. Be cool. Be helpful. The web is a big place. Have fun. High five.