attributes - attr('defaultValue') is returning undefined using jQuery 1.6.3

Question

I have a simple script in jQuery that works perfectly with jQuery 1.5.2 as you can see in this jsFiddle. What is supposed to happen is that when you bring focus to the text field, the default value is removed. And when if you leave the field blank, the original default value is put back in place.

http://jsfiddle.net/kHBsD/

However, the same exact code, where only jQuery 1.6.3 is used instead, is not working. (Not working means that the default value remains in the text box until you manually delete it as you can see in this jsFiddle.

http://jsfiddle.net/kHBsD/1/

There are no script errors in the console and other aspects of the function are operational. You can see the hover() portion is working fine in both jsFiddles.

---

Summarized Version (the Root Problem)

jQuery 1.6.3 is returning undefined for .attr('defaultValue').

jsFiddle using jQuery 1.6.3 (not working)

However, jQuery 1.5.2 is returning the expected value for .attr('defaultValue').

jsFiddle using jQuery 1.5.2 (working)

---

Question:

Does anyone know why this would be happening? (It looks like a jQuery bug to me.)

The following is still working...

document.getElementById().defaultValue

...but I think it's pretty ugly to have to do that where jQuery is available.

I'm open to other suggestions.

Answer 1

Use prop():

$( '#q' ).prop( 'defaultValue' )

Live demo: http://jsfiddle.net/kHBsD/8/

You see, 'defaultValue' is not a content attribute (HTML attribute) as you can see for yourself if you look at your HTML source code. Instead, it's a property of the HTMLInputElement DOM element node.

See here: https://developer.mozilla.org/en/DOM/HTMLInputElement

---

Attributes exist in the HTML source code.
Properties exist in the DOM tree.

When the browser parses the HTML source code, the HTML <input> element is interpreted and a corresponding HTMLInputElement DOM node is created. This DOM element contains dozens of properties ('defaultValue' being one of them).

---

Here, I've refactored your code:

$( '.autoclear' ).
    focus( function () {
        if ( this.value === this.defaultValue ) {
            this.value = '';
            $( this ).removeClass( 'blur' ).addClass( 'focus' );
        }
    }).
    blur( function () {
        if ( this.value === '' ) { 
            this.value = this.defaultValue;
            $( this ).removeClass( 'focus' ).addClass( 'blur' );
        }
    });

Live demo: http://jsfiddle.net/kHBsD/9/

prop() is not necessary - you have the this reference, so you can just access the property directly. Also those hover handlers are not needed, just use a input:hover CSS rule.