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

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

對於良好的用戶體驗來說,網站/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();  }  });  */    這個屬性不僅在常規輸入元素上可用,包括表單字段或 <a> 標簽鏈接,而且只要設置了 tabIndex 屬性的任意元素都是可用的。    我喜歡 document.activeElement 的原因是,不需要使用事件監聽或委托監聽器來追蹤記錄下那個元素獲得了焦點 —— 您可以隨時獲取這個屬性。 當然在使用這樣的特性之前你應該做大量的測試—— 是否在跨浏覽器或競態條件下出什麼BUG。 總而言之,我對它很滿意,覺得它非常可靠!