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

Question

我想为我的网站编写一个简单的占位符jQuery插件，但是当然我只想在原生占位符属性不受支持时才触发该函数……

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

- Jannis

---

谢谢提供链接。非常好的资源。 - Jannis

@hellvinz 提供的链接已经失效了，很遗憾。这里提供一个更新后的镜像：http://diveinto.html5doctor.com/detect.html#input-placeholder - Binarytales

Answer 1

你可以在你写的Javascript代码中，添加以下内容来很容易地扩展$.support：

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

您可以在代码的任何地方使用$.support.placeholder或jQuery.support.placeholder。

NB此代码改编自上面hellvinz提供的链接中的diveintohtml5。

- lonesomeday

---

嗨，谢谢您的评论！那个小插件正是我所需要的。你介意我把它包含在我正在编写的jquery插件中吗？ - Jannis

如果你没有使用Modernizr，我喜欢这个解决方案，但实际上'placeholder' in i比i.placeholder !== undefined稍微更耗费一些性能，因为脚本需要在检查执行之前映射所有对象属性。虽然变化不大，但是每一点都重要，通常情况下应该尽可能避免使用[some att] in [some object]，原因如上所述。 - Tokimon

请注意，这种技术同样适用于没有 jQuery 的情况。 - Christopher Schultz

这个能不能简化成$.support.placeholder = document.createElement('input').placeholder !== undefined;？ - David Harkness

请注意，jQuery关于$.support的说明：旨在供jQuery内部使用；当不再需要内部使用以提高页面启动性能时，特定属性可能会被删除。 https://api.jquery.com/jquery.support/ - rakslice

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

- Ender

---

谢谢你的回答。我已经在我的文档中使用了Modernizr，但是为了使这个插件在所有网站上都能正常工作，除了jQuery之外，我不想依赖于任何外部库，比如Modernizr。在我当前正在构建的页面上，这确实非常好用，但是为了通用性，我更喜欢不依赖于Modernizr的东西。 - Jannis

Answer 3

I like having such a simple class ...

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

这样您就可以轻松检查您的浏览器是否支持placeholder属性。

if (Browser.Can.Placeholder()) {

}

- ˈvɔlə

Answer 4

无论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.
}

- Aleksey Kolesnik