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

我试图编写一个简单的占位符jQuery插件为我的网站，但当然我只想发射的function，如果原生的占位符属性不支持…

我如何使用jQuery来testing占位符属性的本机支持？

Answer 1

您可以通过在您写的Javascript的顶部插入以下内容来轻松添加到$.support ：

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

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

NB这个代码改编自diveintohtml5 ，上面hellvinz提供的链接。

Answer 2

使用Modernizr库，你可以在这里find： 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对testing浏览器对几乎所有HTML5function的支持非常方便。

Answer 3

我喜欢有这么简单的课

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

…所以你可以很容易地检查你的浏览器是否支持占位符属性。

 if (Browser.Can.Placeholder()) { } 

Answer 4

placeholder属性存在于所有浏览器中的INPUT DOM对象上，而不pipe在HTML INPUT元素上是否定义了占位符属性。

正确的方法是：

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