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

自动对焦的表单字段是一个布尔属性浏览器设置关注它当一个页面被加载。如果你还是不明白那是什么,请去谷歌,你注意到你只要输入搜索字符串不先点击文本框。
这是因为谷歌设置焦点,文本框自动(我不是说谷歌使用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" />


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值