HTML5實戰與剖析之焦點管理(activeElement與hasFocus)

黄舟

發布： 2017-02-10 14:57:28

原創

1953 人瀏覽過

　　現在的網站越來越注重殘障人士了，很多網站都開始有專為視力不好的人們製作一些便捷通道，方便他們進行瀏覽網頁。以下就為大家介紹一下有關焦點管理和盲人網站方面的事兒，希望能對大家有所幫助。

　　21世紀的網站，越來越注重殘障人士了，其他傷殘類型還好說一些，要是視力方面不太好的人們去瀏覽網站，基本上是不知道怎麼瀏覽。視力不好的人們去瀏覽基本上是靠獲取焦點來瀏覽網站的，主要是靠獲取焦點以後讀取內容來瀏覽網站的。所以焦點管理在為視力不佳的人製作網站的時候是特別重要的。

　　正因為考慮到視力不好的人們是客觀存在的，所以HTML5添加了輔助管理DOM焦點的功能。

　　1、document.activeElement屬性

　　Document.activeelement屬性總是會引用DOM中目前獲得了焦點的元素。元素獲得焦點的方式有使用者輸入(通常是按Tab鍵)、在程式碼中呼叫focus()方法和頁面載入。先來看個小例子。

　　JavaScript代碼

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

登入後複製

　　預設情況下，文檔剛剛載入完成的時候，document.activeelement中保存的是document.body元素的參考。在文檔載入期間，document.activeelement的值為null。透過document.activeelement可以判斷文件是否載入完成。

　　2、document.hasFocus()方法

　　HTML5除了新添加了document.activeelement屬性，還添加了document.hasfocus()方法。這個方法用於確定文件是否獲得了焦點。先來看個小例子。

　　HTML程式碼

window.onload = function(){
	var btn = document.getElementById("btn");

	//页面加载获取焦点
	alert(document.activeElement.id) // body
	
	//调用focus()方法获取焦点
	btn.focus();

	alert(document.activeElement.id) // btn
};

登入後複製

　　JavaScript程式碼

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

登入後複製

　　有了hasFocus()方法，我們就可以偵測文件是否獲得了焦點，可以知道使用者是否在與頁面互動。

　　查詢文件獲知哪個元素獲得了焦點，以及確定文檔是否獲得了焦點，這兩個功能最重要的用途是提供Web應用的無障礙性。無障礙Web應用的一個主要標誌就是恰當的焦點管理，而確切知道哪個元素獲得了焦點是一個極大的進步，至少我們不用像過去一樣靠猜測了。先來看個小例子。

　　hasFocus()應用小例子

　　HTML代碼

window.onload = function(){
	var btn = document.getElementById("btn");

	alert(document.hasFocus())  //true
};

登入後複製

　　JavaScript代碼

<p id="meng">鼠标放上来</p>
<p id="long" style="display:none;">获取焦点了</p>

登入後複製

　　這個例子充分運用了這個例子是否充分運用了上面焦點是否有法來獲得焦點。從而也讓我們感覺了一下hasFocus()方法的魅力，以及焦點管理的用處。能夠實現這hasFocus()方法和activeElement屬性的瀏覽器有：FireFox 3+、Safari 4+、Chrome、Opera 8+ 和IE 4+。

　　HTML5實戰與剖析之焦點管理(activeElement和hasFocus)就為大家分享到這裡。中國Web應用無障礙化還有待發展，掌握好焦點管理(activeElement和hasFocus)，基本上能夠實現Web應用無障礙化。感謝大家對夢龍小站的支持，更多有關HTML5的跟新敬請關注夢龍小站HTML5實戰與剖析的相關更新。

以上就是HTML5實戰與剖析之焦點管理(activeElement和hasFocus) 的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！

HTML5實戰與剖析之焦點管理(activeElement與hasFocus)

1、document.activeElement屬性

<body id="body"> <input id="btn" type="button" value="梦龙小站" /> </body>登入後複製登入後複製

 HTML程式碼

有了hasFocus()方法，我們就可以偵測文件是否獲得了焦點，可以知道使用者是否在與頁面互動。

JavaScript代碼

　　1、document.activeElement屬性

<body id="body"> <input id="btn" type="button" value="梦龙小站" /> </body>
登入後複製
登入後複製

　　HTML程式碼

　　有了hasFocus()方法，我們就可以偵測文件是否獲得了焦點，可以知道使用者是否在與頁面互動。

　　JavaScript代碼