我想为我的网站编写一个简单的占位符jQuery插件,但是当然我只想在原生占位符属性不受支持时才触发该函数……
如何使用jQuery测试占位符属性的原生支持?
我想为我的网站编写一个简单的占位符jQuery插件,但是当然我只想在原生占位符属性不受支持时才触发该函数……
如何使用jQuery测试占位符属性的原生支持?
你可以在你写的Javascript代码中,添加以下内容来很容易地扩展$.support
:
jQuery.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
您可以在代码的任何地方使用$.support.placeholder
或jQuery.support.placeholder
。
NB此代码改编自上面hellvinz提供的链接中的diveintohtml5。
'placeholder' in i
比i.placeholder !== undefined
稍微更耗费一些性能,因为脚本需要在检查执行之前映射所有对象属性。虽然变化不大,但是每一点都重要,通常情况下应该尽可能避免使用[some att] in [some object]
,原因如上所述。 - Tokimon$.support.placeholder = document.createElement('input').placeholder !== undefined;
? - David Harkness$.support
的说明:旨在供jQuery内部使用;当不再需要内部使用以提高页面启动性能时,特定属性可能会被删除。
https://api.jquery.com/jquery.support/ - rakslice使用现代化库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功能的支持。
I like having such a simple class ...
var Browser = {
Can: {
Placeholder: function () {
return 'placeholder' in document.createElement('input');
}
}
}
这样您就可以轻松检查您的浏览器是否支持placeholder属性。
if (Browser.Can.Placeholder()) {
}
无论HTML INPUT元素是否定义了placeholder属性,placeholder
属性都存在于所有浏览器的INPUT 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.
}