HTML5“占位符”支持

Posted 2023-03-05

【中文标题】HTML5“占位符”支持

【英文标题】：HTML5 "placeholder" support

【发布时间】：2011-10-26 23:29:19

【问题描述】：

如何确定浏览器是否支持 html5 占位符标签，以便我决定是否要挂钩我的 jQuery 占位符插件。

【参考方案1】：

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

如果本机支持变量placeholderSupported，它将是true。否则，它将被设置为false。

【讨论】：

为什么需要！！在表达式中？

【参考方案2】：

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

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

但是，您正在使用的 jQuery 插件可能已经在检查本地支持 - 您可能不需要需要自己做。

【讨论】：

jQuery 支持很简单； $.support.placeholder

【参考方案3】：

如果您想包含 Modernizr 和 yepnope.js 等第三方库，测试支持并逐步增强、优雅降级非常容易。

这是一篇很好的文章，有很多资源可以提供帮助：http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

【参考方案4】：

要获得广泛的想法，请访问：

http://caniuse.com/#search=placeholder

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

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

【参考方案5】：

我从上面的答案中借用并使它向后兼容旧的现代浏览器以及 IE --

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

说明 -- 如果浏览器支持占位符，则删除输入值。如果没有，旧版浏览器将忽略占位符属性，下面的 js 模仿默认占位符行为。此脚本还将忽略 CSRF 的任何身份验证令牌（在我的表单中清除身份验证令牌值时出现错误，导致我的 Rails 应用程序中出现 CSRF 警告）。

另一种简化脚本本身的方法是为您特别想使用此脚本的每个输入分配一个类，并相应地更新真实语句（尽管下面的方法有点干）。

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;
            
    );