我正在尝试为我的网站编写一个简单的占位符 jQuery 插件，但当然我只想在不支持原生占位符属性的情况下触发该函数……
如何使用 jQuery 测试对占位符属性的原生支持？
【问题讨论】：
标签： jquery html testing placeholder
我喜欢这样简单的课程...
var Browser = {
Can: {
Placeholder: function () {
return 'placeholder' in document.createElement('input');
}
}
}
...这样您就可以轻松检查您的浏览器是否支持占位符属性。
if (Browser.Can.Placeholder()) {
}
【讨论】：
placeholder 属性存在于所有浏览器中的 INPUT DOM 对象上，无论 HTML INPUT 元素上是否定义了占位符属性。
正确的做法是：
var Modernizr = {};
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = {};
Modernizr.input = (function(props) {
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(' '));
if(!Modernizr.input.placeholder) {
// Do something.
}
【讨论】：
您可以很容易地添加到$.support，只需将其插入您编写的 Javascript 的顶部：
jQuery.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
然后您可以在代码中的任何位置使用$.support.placeholder 或jQuery.support.placeholder。
NB此代码改编自diveintohtml5，上面的链接由hellvinz提供。
【讨论】：
$.support 的插件将是微不足道的。快速测试表明，一旦缩小，它将是一个 11kb 的文件。
'placeholder' in i 实际上比i.placeholder !== undefined 的性能要高一些执行检查之前的所有对象属性。变化不大，但一切都很重要，出于上述原因，通常应尽可能避免使用 [some att] in [some object]。
$.support: Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. api.jquery.com/jquery.support
使用 Modernizr 库，您可以在此处找到该库：http://www.modernizr.com/
然后这样做：
if (Modernizr.input.placeholder) {
// your placeholder text should already be visible!
} else {
// no placeholder support :(
// fall back to a scripted solution
}
Modernizr 非常方便测试浏览器对几乎所有 HTML5 功能的支持。
【讨论】：