JavaScript检查IE8中对本地占位符的支持

Question

在IE8中，尽管没有本地支持placeholder属性，为什么('placeholder' in inputElemnt)等于true？(attribute in element)不是检查本地支持的好方法吗？JavaScript库Modernizer使用它。 我有一个名叫Defaultvalue (http://unwrongest.com/projects/defaultvalue/)的小型Jquery插件。 我有一个名为Placeholder(https://github.com/janjarfalk/jquery.placeholder.js)的小型Jquery插件。它基本上是HTML5 placeholder属性的后备。

最近更新时，我添加了以下三行代码。希望如果浏览器具有对占位符属性的本机支持，则Defaultvalue将不会运行。

if ('placeholder' in this) {
    //这是一个输入元素
    return false;
}

除了IE8和IE7之外，它似乎在大多数浏览器中都有效。由于某种原因，它在this中找到了“placeholder”键，但我认为IE7 / IE8中没有对placeholder属性的支持。

我的代码受到JavaScript库Modernizer（http://www.modernizr.com/）中此代码的启发。

(function(props) {
    // 循环遍历属性数组，判断是否在input元素中存在
    for (var i = 0, len = props.length; i < len; i++) {
        attrs[ props[i] ] = !!(props[i] in inputElem);
    }
    return attrs;
})('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

我漏掉了什么？

- u840903

---

IE对属性和属性值的理解存在误区，它认为它们是相同的（jQuery也是）。非标准属性被添加为“expando”属性。使用for..in循环来迭代主机对象的属性不是一个好主意。IE < 9不支持hasAttribute，所以那样做也行不通。 - RobG

占位符属性在IE9中也没有实现... - Šime Vidas

Answer 1

创建一个新的原始输入元素解决了我的问题。

var nativePlaceholderSupport = (function() {
    var i = document.createElement('input');
    return i.placeholder !== undefined;
})();
if(nativePlaceholderSupport){
    return false;
}

var nativePlaceholderSupport = (function(){
    var i = document.createElement('input');
    return ('placeholder' in i);
})();
if(nativePlaceholderSupport){
    return false;
}

感谢RobG，你指引我找到了答案。

- u840903

---

那不是一个好的解决方案。HTML5 草案说：“如果指定了属性...”，因此它不是强制性属性，没有理由相信元素将具有占位符属性，如果未设置该属性。因此，它的缺失并不意味着它不受支持，只是没有被设置。而且不要在宿主对象上使用for..in，无论你试图做什么，都可以通过其他一些方法来解决，这些方法得到更广泛的浏览器支持。 - RobG

@RobG 他没有使用 for...in。 - Šime Vidas

@Šime Vidas：好的，如果..在，随便。这类似于有关本机对象属性以特定顺序返回的辩论，因为某些浏览器会这样做，即使ECMA-262说不要依赖它。如果某个规范中定义了某些内容，您可以期望随着时间的推移，浏览器将收敛于该行为并处理异常情况。如果某种行为很常见但未经指定，则只希望每个人都遵循领导者。也许他们会，也许他们不会。他们并不都遵循IE关于对象属性顺序的规则，那么为什么要遵循Gecko / WebKit关于DOM属性/属性的规则呢？ - RobG

@RobG 这不是 Gecko/WebKit 的问题。这是跨浏览器的，这就是浏览器的工作原理。看一下这个演示。规则是：如果浏览器在类型为 Y 的 DOM 元素上实现属性 X，则每个类型为 Y 的 DOM 元素都将包含属性 X，无论是否已在 HTML 源代码中对应的 HTML 元素上设置了属性 X。如果未定义属性，则相应属性的值将为 falsy (""、false、0 等)，但该属性将存在于该 DOM 元素上。 - Šime Vidas

虽然浏览器的行为是证据，但仅凭此还不足以说服我。对相关W3C草案的搜索表明，至少就HTML5而言，浏览器应该为所有支持的属性在DOM元素上创建属性，即使它们没有被赋值或在标记中不存在。 - RobG

无论 W3C 的规范如何，属性的存在是我们唯一能够依赖的确定浏览器支持属性的方式。因此，在某个浏览器决定与其他浏览器相去甚远之前，我认为这是一种可靠的测试方法。然而，我可能会使用 i.placeholder !== undefined 来测试属性的存在，因为它对性能的影响较小。 - Tokimon

Answer 2

不是这样的。在IE9和IE8中，它等于false。

实时演示：http://jsfiddle.net/JVSgx/

- Šime Vidas

---

IE 9支持占位符属性吗？据我所知，它不支持。 - RobG

@RobG 不是的。我的演示证实了这一点。 - Šime Vidas