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

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.

Answer 2

var x=$('#q').prop('defaultValue');