css - 有什么方法可以检测浏览器中的 html 功能可用性

Question

如果以下 html5 或 css 3 功能在浏览器上可用，是否有任何方法可以在 javascript 中进行检测。

例如，我有一个属性:占位符，

<input type="text" placeholder="type your email address" />

我设置了一个 javascript 函数，如果浏览器不支持占位符属性，它将设置一个手动占位符

---

如果我使用 Modernizr，会这样吗:

if ( Modernizr.testProp('placeholder') )
// add attribute placeholder
else
// assign a keypress event as placefolder

Answer 1

在像这样的简单情况下，您可以直接执行操作而无需涉及 Modernizr:

<input type="text" placeholder="type your email address" 
  id="email">
<script>    
var email = document.getElementById('email');
if(!('placeholder' in email)) {
  email.value = email.getAttribute('placeholder');
  email.onfocus = function () { this.value = ''; };
}
</script>

在这种方法中，placeholder 属性出现在静态 HTML 标记中。不受支持时不会造成伤害；事实上，即使不受支持，它也很有用。

要点是，当支持 placeholder 时，元素节点存在具有该名称的属性。即使不支持，浏览器也会解析并存储它，这样你就可以通过 getAttribute() 获取它并将值赋给 value 属性，使它显示为初始内容。

代码在获得焦点时清除该字段。这听起来比点击时清除它要好，因为用户可能会在输入部分数据后出于多种原因点击该字段。

附言为了可用性、可访问性和简单性，最好为每个输入字段使用可见标签，而不是使用占位符。所以这不是一个好的用例。但是可以使用相同的技术，例如一个非常简单的搜索表单，网站通常将其作为网站导航系统的一部分；将表单压缩到非常小的尺寸并省略标签是有意义的。