您的位置:首页 > Web前端 > HTML5

html5的Input Attr : Autofocus,感觉挺有意思的!

2014-03-11 19:05 381 查看
自动对焦的表单字段是一个布尔属性浏览器设置关注它当一个页面被加载。如果你还是不明白那是什么,请去谷歌,你注意到你只要输入搜索字符串不先点击文本框。

这是因为谷歌设置焦点,文本框自动(我不是说谷歌使用HTML5“自动对焦”)并保存你一个鼠标点击。
下面是代码,小菜一碟。

<label for="name">Your name goes here :</label><input id ="name" type="text" autofocus/> <br />
<label for="mothername">Your dog's name goes here :</label><input id ="mothername" type="text" />

“自动对焦”是一个布尔属性,设置任何值是不必要的。

像往常一样,并不是每一个web浏览器支持自动对焦”

实现多一点点简单的“自动对焦”,你将不得不再次使用Javascript来查看web浏览器是否支持“自动对焦”,如果不是,刚和Javascript设置焦点。

下面是演示以及测试。如果您的web浏览器支持自动对焦,你会发现光标闪烁在第一个文本框,如果浏览器不支持它,它将集中在第二个输入框。
<script>
function testAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
}
else
return false;
}

window.onload = function() {
if (!testAttribute('input', 'autofocus'))
document.getElementById('Text2').focus();
//for browser has no autofocus support, set focus to Text2.
}
</script>
<label for="Text1">Support Autofocus :</label><input id ="Text1" type="text" autofocus/> <br />
<label for="Text2">No Autofocus Support :</label><input id ="Text2" type="text" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html5的Input Attr- Au