jquery - 如何测试浏览器是否支持原生占位符属性？

Question

我正在尝试为我的网站编写一个简单的占位符 jQuery 插件，但当然我只想在不支持原生占位符属性的情况下触发该函数……</p>

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

Answer 1

您可以$.support通过在您编写的 Javascript 的顶部插入它来轻松添加：

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

然后，您可以在代码中使用其中一个$.support.placeholder或任何位置。jQuery.support.placeholder

注意这段代码改编自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 INPUT 元素上是否定义了占位符属性，该属性都存在于所有浏览器中的 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.
}