HTML5實戰與剖析之表單－自動取得焦點屬性(autofocus屬性)

　　HTML5在表單中新添加了很多功能，夢龍小站將慢慢為大家介紹，今天為大家介紹HTML5表單中新添加的有關焦點的屬性。

　　HTML5加入了autofocus屬性，這個屬性在支援它的瀏覽器中，只要設定了這個屬性，不用JavaScript動態取得焦點，就能自動把焦點移到對應欄位。小例子如下：

　　HTML代碼

<input type="text" value="梦龙小站" autofocus />

　　🜎 　　為了確保上面的程式碼在設定autofocus的瀏覽器中正常運行，咱們必須在JavaScript中偵測是否設定了該屬性。如果設定了，就不用呼叫focus()方法。 　　

JavaScript程式碼

function load(){
	var oInp = document.getElementById("inp");
	if(oInp.autofocus != true){
		oInp.focus();
	}
}
window.addEventListener('load',load, false);

　　

HTML]

　　由於autofocus是一個布林值屬性，所以在支援的瀏覽器中它的值是”true”，在不支援的瀏覽器中，它的值是空字串。上面的程式碼只有在autofocus不等於true的情況下才會呼叫focus()方法，從而保證了向前相容的問題。支援autofocus屬性的瀏覽器有Firefox 4+、Safari 5+、Chrome和Opera 9.6.　　在預設情況下，只有表單可以獲得焦點。對於其他標籤元素來說，如果先將其tabIndex屬性設為-1，然後在呼叫focus()方法，也可以讓這些元素獲得焦點，但是只有Opera不支援這種技術。 　　HTML5果然讓大家的程式碼生活變得很簡單，一個小小的屬性省去了一行甚至幾行的JavaScript程式碼，讓大家的程式碼生活變得輕鬆愜意。 HTML5實戰與剖析之表單－自動取得焦點屬性(autofocus屬性)就為大家介紹完了， 希望對大家在HTML5應用上有所幫助。 以上就是HTML5實戰與剖析之表單－自動取得焦點屬性(autofocus屬性)的內容，更多相關內容請關注PHP中文網（www.php.cn）！