使用JS取得焦點(focus)元素程式碼_javascript技巧

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

對輸入焦點處理很差的一個例子: 在點擊一個連結以後打開一個視窗,但卻不將遊標聚焦到視窗中的任何元素內。 甚至更糟的是: 聚焦到模態視窗中的某個元素,但在關閉以後焦點照樣不返回。 理想情況下,在觸發鏈結時會保存一個引用,然後將遊標聚焦到新視窗,並在視窗關閉時把遊標重新移回去。

但假如你不知道輸入遊標現在在哪個元素上怎麼辦? 透過document.activeElement 屬性我們可以取得目前文件中取得焦點的元素!

The JavaScript

使用document.activeElement 來找出目前選取的元素是很容易的事:

複製程式碼 程式碼如下:

var focusedElement = document.activeElement;

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

這個屬性不僅在常規輸入元素上可用,包括表單欄位或 標籤連結,而且只要設定了tabIndex 屬性的任意元素都是可用的。

我喜歡 document.activeElement 的原因是,不需要使用事件監聽或委託監聽器來追蹤記錄下那個元素獲得了焦點 —— 您可以隨時獲取這個屬性。 當然在使用這樣的功能之前你應該要做大量的測試－ 是否在跨瀏覽器或競態條件下出什麼BUG。 總而言之,我對它很滿意,覺得它非常可靠!