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/#search=placeholder

要在浏览器中进行测试，您可以这样做：

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

Answer 5

我借鉴了上面的答案，并使其向后兼容旧的现代浏览器以及IE -

使用以下代码，确保为输入字段设置了“值”和“占位符”属性。在我的特定情况下，我需要支持IE变种。

说明 - 如果浏览器支持占位符，则删除输入值。如果没有，旧的浏览器将忽略占位符属性，下面的js模仿默认的占位符行为。此脚本还将忽略CSRF的任何auth令牌（在我的表单中获取auth令牌值时会出现错误，导致我的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;
            }
    });
}

HTML5“占位符”支持

5 个答案: