《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦

Posted 2020-06-14

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

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

<form name="input" action="html_form_action.php" method="post">
    <div class="login-item">
        <label for="nick">姓名：<input autofocus id="nick" name="nick"/></label>
    </div>
    <div class="login-item">
        <label for="password">密码：<input id="password" name="password"/></label>
    </div>
    <div class="login-submit">
        <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段代码。