如何测试浏览器是否支持本地占位符属性?
-
30-09-2019 - |
题
我正在尝试为我的网站编写一个简单的占位符插件,但是当然,我只想在不支持本地占位符属性时启动该功能...
如何使用jQuery测试占位符属性的本机支持?
解决方案
你可以添加到 $.support
很容易将其插入您编写的JavaScript的顶部:
jQuery.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
然后您可以使用 $.support.placeholder
或者 jQuery.support.placeholder
代码中的任何地方。
nb此代码适用于 Diveintohtml5, ,上面Hellvinz提供的链接。
其他提示
使用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功能的支持。
我喜欢这样一个简单的课...
var Browser = {
Can: {
Placeholder: function () {
return 'placeholder' in document.createElement('input');
}
}
}
...因此,您可以轻松检查浏览器是否支持占位符属性。
if (Browser.Can.Placeholder()) {
}
这 placeholder
无论占位符属性是否已在HTML输入元素上定义,所有浏览器中的输入DOM对象都存在属性。
正确的方法是:
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.
}
不隶属于 StackOverflow