如何测试浏览器是不是支持原生占位符属性？

Posted 2023-03-05

【中文标题】如何测试浏览器是不是支持原生占位符属性？

【英文标题】：How to test if the browser supports the native placeholder attribute?如何测试浏览器是否支持原生占位符属性？

【发布时间】：2011-04-25 16:01:20

【问题描述】：

我正在尝试为我的网站编写一个简单的占位符 jQuery 插件，但当然我只想在不支持原生占位符属性的情况下触发该函数……

如何使用 jQuery 测试对占位符属性的原生支持？

【问题讨论】：

感谢您的链接。优秀的资源。

@hellvinz 提供的链接很遗憾现在 410 消失了。这是更新的镜像：diveinto.html5doctor.com/detect.html#input-placeholder

【参考方案1】：

我喜欢这样简单的课程...

var Browser = 
  Can: 
    Placeholder: function () 
      return 'placeholder' in document.createElement('input'); 
    
  

...这样您就可以轻松检查您的浏览器是否支持占位符属性。

if (Browser.Can.Placeholder()) 

【参考方案2】：

placeholder 属性存在于所有浏览器中的 INPUT DOM 对象上，无论 HTML INPUT 元素上是否定义了占位符属性。

正确的做法是：

var Modernizr = ;
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = ;    
Modernizr.input = (function(props) 
    for(var i = 0, len = props.length; i < len; i++) 
        attrs[props[i]] = props[i] in inputElem;
    
    return attrs;
)('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

if(!Modernizr.input.placeholder) 
    // Do something.

【参考方案3】：

您可以很容易地添加到$.support，只需将其插入您编写的 javascript 的顶部：

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

然后您可以在代码中的任何位置使用$.support.placeholder 或jQuery.support.placeholder。

NB此代码改编自diveintohtml5，上面的链接由hellvinz提供。

【讨论】：

这太棒了，正是我想要的。谢谢你。 PS：谢谢你的链接，很好的资源。 已收藏！

感谢 hellvinz，而不是我，提供链接！更重要的是，创建一个将所有 Modernizr 测试导入到$.support 的插件将是微不足道的。快速测试表明，一旦缩小，它将是一个 11kb 的文件。

即使我只想测试表单功能？

我喜欢这个解决方案（如果您不使用 Modernizr），但由于脚本必须映射，'placeholder' in i 实际上比i.placeholder !== undefined 的性能要高一些执行检查之前的所有对象属性。变化不大，但一切都很重要，出于上述原因，通常应尽可能避免使用 [some att] in [some object]。

请注意，jQuery 说的是 $.support: Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. api.jquery.com/jquery.support

【参考方案4】：

使用 Modernizr 库，您可以在此处找到该库：http://www.modernizr.com/

然后这样做：

if (Modernizr.input.placeholder) 
  // your placeholder text should already be visible!
 else 
  // no placeholder support :(
  // fall back to a scripted solution

Modernizr 非常方便测试浏览器对几乎所有 HTML5 功能的支持。

【讨论】：

感谢您的回答。我已经在我的文档中使用了 Modernizr，但是为了让这个插件可以在所有网站上运行，我当然不想依赖任何外部库，比如除了 jQuery 之外的 Modernizr。在我正在构建的当前页面上，它确实效果很好，但只是为了一般兼容性，我更喜欢不依赖 Modernizr 的东西。