使用JS取得焦點(focus)元素代碼

更新時間：2014年03月22日 16:13:40 作者：

這篇文章主要介紹了使用JS取得焦點(focus)元素的具體實現(xiàn),需要的朋友可以參考下

對于良好的用戶體驗來說,網(wǎng)站/web app的可訪問性和可用性,以及功能都是至關重要的。
當我們的網(wǎng)站運行良好/體驗很好的時候,用戶是意識不到的,但我們做得不好時他們肯定會感覺到。應用程序的可用性和可訪問性的一個重要組成部分是輸入焦點(focus)的處理,但這又是開發(fā)人員常常會忽視的一點。

對輸入焦點處理很差的一個例子: 在點擊一個鏈接以后打開一個窗口,但卻不將光標聚焦到窗口中的任何元素內。甚至更糟的是: 聚焦到模態(tài)窗口中的某個元素,但在關閉以后焦點照樣不返回。理想情況下,在觸發(fā)鏈接時會保存一個引用,然后將光標聚焦到新窗口,并在窗口關閉時把光標重新移回去。

但假如你不知道輸入光標現(xiàn)在在哪個元素上怎么辦? 通過 document.activeElement 屬性我們可以取得當前文檔中獲得焦點的元素!

The JavaScript

使用 document.activeElement 來查找當前選中的元素是很容易的事:

復制代碼代碼如下:

 
var focusedElement = document.activeElement; 

/* 比如某個示例: 
var triggerElement = document.activeElement; 
myModal = new MyModal({ 
onOpen: function() { 
this.container.focus(); 
}, 
onClose: function() { 
triggerElement.focus(); 
} 
}); 
*/ 

這個屬性不僅在常規(guī)輸入元素上可用,包括表單字段或 <a> 標簽鏈接,而且只要設置了 tabIndex 屬性的任意元素都是可用的。

我喜歡 document.activeElement 的原因是,不需要使用事件監(jiān)聽或委托監(jiān)聽器來追蹤記錄下那個元素獲得了焦點 —— 您可以隨時獲取這個屬性。當然在使用這樣的特性之前你應該做大量的測試—— 是否在跨瀏覽器或競態(tài)條件下出什么BUG。總而言之,我對它很滿意,覺得它非?？煽?

您可能感興趣的文章: