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

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

但假如你不知道輸入光標現在在哪個元素上怎么辦? 通過 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();
}
});
*/