1

如果浏览器上提供以下 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
4

2 回答 2

4

在这样一个简单的情况下，您可以直接执行操作，而无需涉及 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属性，使其显示为初始内容。

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

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

于 2012-05-10T11:03:37.640 回答
2

使用Modernizr满足您所有的特征检测需求

于 2012-05-10T10:25:59.440 回答