HTML5 "placeholder"支持

Question

我怎样才能知道浏览器是否支持HTML5占位符标签，所以我可以决定是否挂钩我的jQuery占位符插件或不

Answer 1

var placeholderSupported = ( 'placeholder' in document.createElement('input') );

如果本地支持，则变量placeholderSupported将为true。否则设置为false

Answer 2

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input');

然而，你正在使用的jQuery插件可能已经在检查原生支持-你可能不需要自己做

Answer 3

如果你想包含第三方库，如Modernizr和yepnope.js，它真的很容易测试支持和逐步增强，优雅地降级。

这是一篇很好的文章，有很多资源应该会有所帮助:http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

要获得一个大致的概念，请访问:

http://caniuse.com/搜索=占位符

在浏览器中测试，你可以这样做:

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

Answer 5

我借鉴了上面的答案，使它能够向后兼容旧的现代浏览器以及IE——

使用下面的代码，确保您为输入字段设置了'value'和'placeholder'属性。在我的特殊情况下，我需要支持IE变体。

说明—如果浏览器支持占位符，则删除输入值。如果不是，旧的浏览器将忽略占位符属性，下面的js模仿默认的占位符行为。这个脚本还将忽略CSRF的任何认证令牌(在我的表单中得到一个错误，在我的Rails应用程序中导致CSRF警告)。

另一种简化脚本本身的方法是为您特别想要使用该脚本的每个输入分配一个类，并相应地更新true语句(尽管下面的方法有点枯燥)。

var placeholderSupported = !!( 'placeholder' in document.createElement('input') );
if (placeholderSupported === true){
    $('input:not([type="submit"], [name="authenticity_token"])').val('');
} else{
    $('input')
      .focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
      })
      .blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
    });
}