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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3937818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:22:48  来源:igfitidea点击:

How to test if the browser supports the native placeholder attribute?

jqueryhtmltestingplaceholder

提问by Jannis

I'm trying to write a simple placeholder jQuery plugin for a site of mine but of course I only want to fire the function if the native placeholder attribute isn't supported…

我正在尝试为我的网站编写一个简单的占位符 jQuery 插件,但当然我只想在不支持本机占位符属性的情况下触发该函数......

How can I use jQuery to test for native support of the placeholder attribute?

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

回答by lonesomeday

You can add to $.supportquite easily by inserting this at the top of the Javascript you've written:

您可以$.support通过将其插入到您编写的 Javascript 的顶部来轻松添加:

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

You can then use either $.support.placeholderor jQuery.support.placeholderanywhere in your code.

然后,您可以在代码中的任何一个$.support.placeholderjQuery.support.placeholder任何地方使用。

NB This code adapted from diveintohtml5, the link provided by hellvinz above.

注意此代码改编自diveintohtml5,上面由hellvinz 提供的链接。

回答by Ender

Use the Modernizr library, which you can find here: http://www.modernizr.com/

使用 Modernizr 库,您可以在这里找到它:http: //www.modernizr.com/

And then do this:

然后这样做:

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizr is really handy for testing the browser's support for almost all HTML5 functionality.

Modernizr 对于测试浏览器对几乎所有 HTML5 功能的支持非常方便。

回答by WoIIe

I like having such a simple class ...

我喜欢有这么简单的课...

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

... so you can easily check if your browser supports the placeholder attribute.

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

if (Browser.Can.Placeholder()) {

}

回答by Aleksey Kolesnik

The placeholderproperty exists on INPUT DOM objects in all browsers regardless whether or not the placeholder attribute has been defined on the HTML INPUT element.

placeholder无论是否在 HTML INPUT 元素上定义了占位符属性,该属性都存在于所有浏览器中的 INPUT DOM 对象上。

The correct way is:

正确的方法是:

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