《超實用的HTML代碼段》閱讀筆記1——HTML5自動聚焦

在頁面載入完成後自動將輸入焦點定位到需要的元素，用戶就可以直接在改元素中進行輸入而不需要手動選擇它。

通過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段代碼。