2012-05-10 178 views
1

如果在浏览器中可以使用以下html5或css 3功能,有什么方法可以在javascript中检测到吗?有没有什么办法可以在浏览器中检测html功能

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

<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

对于简单的情况就是这样,你可以直接做的事情,而不涉及的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属性,以使其显示为初始内容。

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

P.S.为了可用性,可访问性和简单性,最好对每个输入字段使用可见标签,而不是使用占位符。所以这不像一个好的用例。但是可以使用相同的技术,例如用于网站通常作为站点导航系统的一部分的非常简单的搜索表单;那么将表单挤压成非常小的尺寸,可以省略标签。

+1

1+这是一个更好的方式来测试你的问题然后modernizer(IF)你并没有将它用于其他事情。更少的外部文件和更快的网站 – atmd

+0

感谢您的意见,但占位符只是一个例子,我使用这个链接,[链接] http://miketaylr.com/code/input-type-attr.html,无论如何,我想你是对的,我可以随处使用这些条件 –

2

使用Modernizr您的所有功能检测需求

+0

我知道什么,我必须使用在modernizer,这是我需要知道如何,我已经更新了我的问题 –

相关问题