如何测试浏览器是否支持本地占位符属性？

Question

我正在尝试为我的网站编写一个简单的占位符插件，但是当然，我只想在不支持本地占位符属性时启动该功能...

如何使用jQuery测试占位符属性的本机支持？

Answer 1

你可以添加到 $.support 很容易将其插入您编写的JavaScript的顶部：

jQuery.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

然后您可以使用 $.support.placeholder 或者 jQuery.support.placeholder 代码中的任何地方。

nb此代码适用于 Diveintohtml5, ，上面Hellvinz提供的链接。

Answer 2

使用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功能的支持。

Answer 3

我喜欢这样一个简单的课...

var Browser = {
  Can: {
    Placeholder: function () {
      return 'placeholder' in document.createElement('input'); 
    }
  }
}

...因此，您可以轻松检查浏览器是否支持占位符属性。

if (Browser.Can.Placeholder()) {

}

Answer 4

这 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.
}