attr('defaultValue') 使用 jQuery 1.6.3 返回 undefined [英] attr('defaultValue') is returning undefined using jQuery 1.6.3

问题描述

我有一个简单的 jQuery 脚本，可以完美地与 jQuery 1.5.2 配合使用，您可以在 this jsFiddle 中看到.应该发生的是，当您将焦点移到文本字段时，默认值将被删除.如果您将该字段留空，则会将原始默认值放回原处.

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/

然而，同样的代码，只使用了 jQuery 1.6.3，却无法正常工作.(不工作意味着默认值保留在文本框中，直到您手动删除它，如您在 this jsFiddle 中看到的那样.

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/

控制台中没有脚本错误，该功能的其他方面都可以运行.您可以看到 hover() 部分在两个 jsFiddles 中都运行良好.

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.

总结版本(根本问题)

jQuery 1.6.3 正在为 .attr('defaultValue') 返回 undefined.

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

jsFiddle 使用 jQuery 1.6.3(不工作)

然而，jQuery 1.5.2 正在返回 .attr('defaultValue') 的预期值.

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

jsFiddle 使用 jQuery 1.5.2(工作)

问题:

有人知道为什么会这样吗?(在我看来，它就像一个 jQuery 错误.)

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

以下仍在工作......

The following is still working...

document.getElementById().defaultValue

...但我认为在 jQuery 可用的情况下必须这样做非常难看.

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

我愿意接受其他建议.

推荐答案

使用prop():

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

现场演示: http://jsfiddle.net/kHBsD/8/

您看，'defaultValue' 不是内容属性(HTML 属性)，如果您查看 HTML 源代码，您可以自己看到.相反，它是 HTMLInputElement DOM 元素节点的属性.

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.

请看这里:https://developer.mozilla.org/en/DOM/HTMLInputElement

属性存在于 HTML 源代码中.
属性存在于 DOM 树中.

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

当浏览器解析 HTML 源代码时，会解释 HTML <input> 元素并创建相应的 HTMLInputElement DOM 节点.这个 DOM 元素包含许多属性('defaultValue' 就是其中之一).

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' );
        }
    });

现场演示: http://jsfiddle.net/kHBsD/9/

prop() 不是必需的 - 您有 this 引用，因此您可以直接访问该属性.也不需要那些悬停处理程序，只需使用 input:hover CSS 规则.

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.

这篇关于attr('defaultValue') 使用 jQuery 1.6.3 返回 undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！