你的位置:首页 > 网页设计

[网页设计]《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦


在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它。

通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下:

<form name="input" action="html_form_action.php" method="post">  <div >    <label for="nick">姓名:<input autofocus id="nick" name="nick"/></label>  </div>  <div >    <label for="password">密码:<input id="password" name="password"/></label>  </div>  <div >    <button type="submit">提交</button>  </div></form>

  

当autofocus属性设置以后,input、textarea以及button元素在页面加载(load)完成之后,会被自动选中(即获得焦点)。如果尝试其他元素非表单元素(如h2元素),tabIndex=0的情况,但是autofocus属性在这些元素上没有效果。

这个属性在主要目的是获取用户输入的页面是很有用的,例如搜索首页(图10.2),主要用于引导用户进行搜索,并且可以不是额外脚本实现。

 

图10.2  自动聚焦

autofocus属性只能用于设置一个元素上,如果多个元素都设置了autofocus属性,那么将会是最后一个元素获取了焦点。

<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea>

  摘自《超实用的HTML代码段》,涵盖HTML和HTML 5的400段代码。