HTML5“占位符”支持

如何确定浏览器是否支持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的任何身份validation令牌（在我的表单中获取身份validation令牌值时出现错误，导致我的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; } }); }