检查占位符是否受支持的简单方法?

alg*_*der 52 html javascript html5 placeholder

HTML5 "placeholder"如果用户的浏览器支持,我想在我的代码中使用该属性,否则只需在表单顶部打印字段名称.但我只想检查占位符是否受支持,而不是用户正在使用的浏览器版本/名称.

所以理想情况下我会想做类似的事情

    <body>

     <script>

           if (placeholderIsNotSupported) {
             <b>Username</b>;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>
Run Code Online (Sandbox Code Playgroud)

除了我不确定javascript位.感谢帮助!

Tro*_*ott 79

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}
Run Code Online (Sandbox Code Playgroud)

我使用jQuery-ized版本作为起点.(只是给予应有的信用.)

  • @iMoses我刚启动了IE8虚拟机并进行了检查.在IE8的上下文中不支持`hasOwnProperty`.它适用于许多对象,但不适用于`document.createElement('input')`产生的对象.是的,浏览器怪癖!: - | (5认同)
  • 在IE9上测试失败.@Nikitta答案更好. (2认同)

小智 35

要不就:

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}
Run Code Online (Sandbox Code Playgroud)


小智 6

如果您使用的是Modernizr,请快速关注以下内容:

if(!Modernizr.input.placeholder){
  ...
}
Run Code Online (Sandbox Code Playgroud)


pro*_*yup 6

另一种方法是不在内存中创建必须进行GC的输入元素:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
Run Code Online (Sandbox Code Playgroud)