HTML5里autofocus自動(dòng)聚焦屬性使用介紹

HTML5給我們帶來(lái)了一大堆神奇的東西。以前需要用JavaScript和Flash完成的任務(wù),例如表單校驗(yàn),INPUT placeholders , 客戶端重命名下載文件和音頻/視頻,這些都可以使用基本的HTML完成。這里要講的一個(gè)簡(jiǎn)單的HTML5功能是當(dāng)頁(yè)面加載完成時(shí)讓輸入焦點(diǎn)自動(dòng)落到某個(gè)元素上;這個(gè)動(dòng)作用autofocus屬性完成。
HTML代碼非常簡(jiǎn)單:
- <!-- These all work! -->
- <input autofocus="autofocus" />
- <button autofocus="autofocus">Hi!</button>
- <textarea autofocus="autofocus"></textarea>
當(dāng)有了autofocus屬性,這些 INPUT, TEXTAREA, 或 BUTTON元素都能在頁(yè)面加載是被選中。但如果使用純顯示元素,例如H1標(biāo)記,autofocus屬性并不好用。
這個(gè)屬性在某些情況下非常有用。例如谷歌的首頁(yè),人們99%的時(shí)間都是用它來(lái)搜索,所以頁(yè)面一旦加載,光標(biāo)必然定位在輸入框里。以前需要使用JavaScript才能完成,現(xiàn)在完全不需要了,html自己就能完成。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。相關(guān)文章
HTML5的結(jié)構(gòu)和語(yǔ)義(4):語(yǔ)義性的內(nèi)聯(lián)元素
HTML4用5個(gè)不同的內(nèi)聯(lián)元素表示略有差異的計(jì)算機(jī)代碼:var、code、kbd、tt和samp。但是,它無(wú)法表示時(shí)間、數(shù)字等基本數(shù)值。HTML5提供了幾個(gè)新的內(nèi)聯(lián)元素來(lái)滿足非技術(shù)作2008-10-17- HTML 5 常用語(yǔ)法一覽(列舉不支持的屬性)2010-01-26
- HTML5 發(fā)展中的命名約定和微格式。2010-02-10
HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
可能大家在使用jquery mobile時(shí),經(jīng)常會(huì)看到data-role、data-theme等的使用,這些都是HTML5自定義屬性,本文整理一些,需要的朋友可以參考下2012-12-13html5 button autofocus 屬性介紹及應(yīng)用
在html 5中,可以設(shè)置當(dāng)頁(yè)面加載時(shí),自動(dòng)焦點(diǎn)到達(dá)某個(gè)控件中,這個(gè)就是autofocus屬性了,接下來(lái)詳細(xì)介紹,有需求的朋友可以了解下2013-01-04html5指南-1.html5全局屬性(html5 global attributes)深入理解
一個(gè)元素可以定義自己的屬性,比如a標(biāo)簽定義href屬性,這種叫局部屬性(local attribute)。相對(duì)應(yīng)的我們可以通過(guò)全局屬性(global attribute)為所有元素設(shè)置共有的行為,2013-01-07- HTML5中,在新增加和廢除很多元素的同時(shí),也增加和廢除了很多屬性比如表單相關(guān)的屬性/鏈接相關(guān)屬性是新增的而HTML4中一些屬性就被廢除掉了,感興趣的你可以了解下,或許對(duì)2013-02-20
- 今天我剛接觸html+css3感覺(jué)還不錯(cuò),下面為大家介紹下用到的input 屬性,感興趣的朋友可以看下截圖哈,希望對(duì)大家有所幫助2013-06-28
HTML5注冊(cè)表單的自動(dòng)聚焦與占位文本示例代碼
想必大家一對(duì)HTML5的自動(dòng)聚焦與占位文本有所了解了吧,要使用HTML5的自動(dòng)聚焦功能,只需要在表單域中添加autofocus屬性即可,首先看下面要使用HTML自動(dòng)聚焦和占位文本的示2013-07-19- 瀏覽器引入了許多的HTML5 特性其中我最喜歡的一個(gè)就是為input元素引入了placeholder屬性,placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點(diǎn),當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)2013-08-07