HTML5 占位符功能检测问题

Posted 2023-03-05

【中文标题】HTML5 占位符功能检测问题

【英文标题】：HTML5 Placeholder feature detection woes

【发布时间】：2012-01-04 21:59:42

【问题描述】：

我需要测试占位符支持。以下适用于所有现代浏览器以及 IE7、IE8、IE9：

$.support.placeholder = (function () 
    var i = document.createElement("input");
    return "placeholder" in i;
());

它有效，但 JSLint 抱怨 in 的使用：

意外的“进入”。与未定义比较，或使用 hasOwnProperty 方法来代替。

好的，所以我将它重构为：

$.support.placeholder = (function () 
    var i = document.createElement("input");
    return i.hasOwnProperty("placeholder");
());

现在它通过了 JSLint，没有任何错误或警告，但它在 IE7 和 IE8 中以这个旧栗子中断：

对象不支持属性或方法“hasOwnProperty”

知道如何让 JSLint 以及 IE7 和 IE8 快乐吗？

【问题讨论】：

只要你知道自己在做什么，让 jslint 这样的工具快乐并不一定意味着让你的代码更好。如果你的老板想要，给他们一些证明他们愚蠢的好例子。

我不明白为什么 jslint 不推荐 in。它已经存在了一段时间，所以应该得到充分的支持，而且非常直观。对于占位符支持，这是可靠的：github.com/mathiasbynens/jquery-placeholder

【参考方案1】：

您也可以使用 JSLint 建议的其他解决方案：

return typeof i.placeholder !== 'undefined';

这应该可以跨浏览器正常工作。

【讨论】：

这也很好用，而且非常简洁，如果我费心阅读错误消息，我应该知道这一点:)

实际上 JSLint 希望您使用 return i.placeholder !== undefined;，如果您尝试使用 typeof i.placeholder !== 'undefined';，它会这样说。

【参考方案2】：

我的回答是不要。不要让 JSLint 高兴。 JSLint 是 Crockford 认为 javascript 应该完成的方式。这是他个人的标准。如果您想要某种 JavaScript lint，请使用 JSHint。它是 JSLint 的一个分支版本，完全可配置且没有疯狂的要求。从它的主页：

JSHint 是 JSLint 的一个分支，由 Douglas 编写和维护的工具 克罗克福德。

该项目最初是为了创造更多 JSLint 的可配置版本——不强制执行的版本 其用户的特定编码风格——但随后转变为 独立的静态分析工具，有自己的目标和理想。

【讨论】：

同意，但很遗憾不是我的决定。我必须忍受它，至少目前是这样。无论如何 +1。

【参考方案3】：

您可以通过Object.prototype 获取函数，然后在元素上通过call 获取它。这使得该函数可用并且您可以以i.hasOwnProperty-fashion 方式调用它（即调用它时在幕后的this 值是i）： p>

Object.prototype.hasOwnProperty.call(i, "placeholder");

【讨论】：

嗯，你会选择哪一个。

@karim79：这个允许将属性设置为undefined，但另一方面确实引入了函数调用开销。