首頁 > web前端 > H5教程 > HTML5 自動聚焦(autofocus)屬性使用介紹_html5教學技巧

HTML5 自動聚焦(autofocus)屬性使用介紹_html5教學技巧

WBOY
發布: 2016-05-16 15:49:10
原創
2882 人瀏覽過

原文: 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參與。
完整的頁面代碼如下:

複製程式碼
程式碼如下:


程式碼如下:





HTML5 autofocus屬性測試










相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板