Get default value of an input using jQuery

Question

$(".box_yazi2").each(function () {
    var default_value = this.value;
    $(this).css('color', '#555'); // this could be in the style sheet instead
    $(this).focus(function () {
        if (this.value == default_value) {
            this.value = '';
            $(this).css('color', '#000');
        }
    });
    $(this).blur(function () {
        if (this.value == '') {
            $(this).css('color', '#555');
            this.value = default_value;
        }
    });
});

This function of default value of input doesnt work in FF, but perfectly works in IE and ofcourse the input itself looks like this:

<input type="text" class="box_yazi2" id="konu" name="konu" value="Boş" />

The last line is an extra set of });. Is this just incorrectly copy-pasted? — David Tang
– David Tang, Commented Jan 4, 2011 at 8:57
does Firebug return an error of some kind maybe? Also, if you just want to get this done (and don't do it for learning purpose): mucur.name/system/jquery_example — harpax
– harpax, Commented Jan 4, 2011 at 8:59
@Box9 yeah ) it is the last function in document.ready )) @jensgram I will try it thx — Bato Dor
– Bato Dor, Commented Jan 4, 2011 at 9:05

Salman Arshad · Accepted Answer · 2014-01-15 15:58:20Z

81

Just use the defaultValue property:

var default_value = $(this).prop("defaultValue");

Or:

var default_value = this.defaultValue;

edited Jan 15, 2014 at 15:58

answered Jan 4, 2011 at 9:19

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user57508 Over a year ago

you should elaborate your example. currently there's no attribute defaultValue

Salman Arshad Over a year ago

defaultValue is a built-in attribute accessible via JavaScript. For input[type=text], it contains the original value of the input element... the value that was present when the page was loaded.

Crazy Joe Malloy Over a year ago

NICE! I had no idea. Is this attribute widely supported/accessible in this manner?

Salman Arshad Over a year ago

@crazy: See Interface HTMLInputElement as described in DOM level 2 specs and HTMLInputElement on MDN. Other interesting attributes are defaultChecked and defaultSelected for radio/checkboxes and options inside select element.

userfuser Over a year ago

There's a diff between attributes and properties in HTML. for getting the defaultValue or defaultChecked, we should use the .prop() method. There's a good explanation at jQuery.com: api.jquery.com/prop

|

Chad · Accepted Answer · 2016-03-18 15:27:00Z

The solution is quite easy; you have an extra }); in your code (thanks @ Box9).

I would encourage you to reuse the variable and not create dozens of jQuery objects.

I've changed your example to background-color but it will work.

$('.box_yazi2').each(function(index, element) {
    var $element = $(element);
    var defaultValue = $element.val();
    $element.css('background-color', '#555555');
    $element.focus(function() {
        var actualValue = $element.val();
        if (actualValue == defaultValue) {
            $element.val('');
            $element.css('background-color', '#3399FF');
        }
    });
    $element.blur(function() {
        var actualValue = $element.val();
        if (!actualValue) {
            $element.val(defaultValue);
            $element.css('background-color', '#555555');
        }
    });
});

demo

lior amrosi · Accepted Answer · 2012-10-14 20:28:16Z

2

$('input[type="text"]').focus( function(){
            elementValue = $(this).val();
            $(this).val("");
        });
        $('input[type="text"]').blur( function(){
            if($(this).val() != elementValue && $(this).val() != ""){

            }else{
                $(this).val(elementValue);
            }

        });

answered Oct 14, 2012 at 20:28

lior amrosi

211 bronze badge

Comments

Sirozha · Accepted Answer · 2011-02-22 08:16:15Z

1

I'm using the next code:

    //clear the focused inputs
$('input[type="text"]').focus( function(){
    if( $(this).attr('value') == $(this).attr('defaultValue') ){
        $(this).attr('value', '');
    };
} );
$('input[type="text"]').blur( function(){
    if( $(this).attr('value') == '' ){
        $(this).attr('value', $(this).attr('defaultValue') );
    };
} );

answered Feb 22, 2011 at 8:16

Sirozha

1266 bronze badges

1 Comment

ThiefMaster Over a year ago

You shouldn't use .attr('value', ...) but .val(...) to change an element's value!

23inhouse · Accepted Answer · 2012-07-16 05:27:05Z

1

Use this.defaultValue

Sorry for the link to w3notcools, http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

answered Jul 16, 2012 at 5:27

23inhouse

1,92720 silver badges20 bronze badges

3 Comments

ThiefMaster Over a year ago

w3schools is a horrible resource. A better reference would be developer.mozilla.org/en-US/docs/DOM/…

userfuser Over a year ago

ThiefMaster, I learned a lot thanks to w3schools and I can't share your view of it being 'horrible resource'. Just because there are better and more detailed or more advanced resources than mentioned website, it doesn't make one 'horrible'. Also, the fact that they don't have anything with the W3C or that someone created a website to bash them - doesn't mean anything regarding their 'horribleness'. To tell the truth - W3C themselves had so much awful solutions/decisions that they are the last to bash other people/companies.

user57508 Over a year ago

@userfuser meta.stackexchange.com/questions/87678/…

Toto · Accepted Answer · 2013-03-08 14:34:56Z

0

You should use prop instead of so many functions to be honest, use 'delegate' instead of 'on' for late static binding.

$('.box_yazi2').each(function() {

$(this).on('focus', function(){

   if($(this).val() == $(this).prop('defaultValue')){

      $(this).val('');
      $(this).css('color', '#000');
    }

});

$(this).on('blur', function(){

   if($(this).val() == ''){

      $(this).val($(this).prop('defaultValue'));
      $(this).css('color', '#000');
   }

});

});

edited Mar 8, 2013 at 14:34

Toto

91.7k63 gold badges97 silver badges135 bronze badges

answered Mar 8, 2013 at 14:14

Wahab Qureshi

1

Collectives™ on Stack Overflow

Get default value of an input using jQuery

6 Answers 6

7 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related