原文: HTML5 autofocus Attribut
原文發佈時間: 2012年08月27日
翻譯時間: 2013年8月6日
HTML5 推出了一大堆精彩的東西給我們。
過去我們要用JavaScript和Flash完成的任務,例如表單驗證,輸入框空白提示(INPUT placeholders),客戶端檔案上傳下載(client side file naming) ,以及音訊/視訊播放,現在都可以用基本的HTML來完成了。另一個簡單的HTML功能是現在允許我們在頁面載入完成後自動將輸入焦點定位到需要的元素,透過一個叫做 autofocus的屬性完成。
代碼就如下面一樣簡單:
當autofocus 屬性設定以後,input,textarea,以及button 元素在頁面加載(load)以後,會被自動選中(即獲得焦點). 我嘗試其他元素(例如h1 標籤),
tabIndex=0的情況,但是autofocus屬性在這些元素上根本沒有效果。
這個屬性在主要目的是取得使用者輸入的頁面(pages whose main purpose is collecting information)是很有用的,例如google首頁(99%的情況是用來搜尋)或線上安裝精靈(例如WordPress's installer) 。而且最關鍵在於--不需要JavaScript參與。
完整的頁面代碼如下: