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

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

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

The JavaScript

使用 document.activeElement 來查找當(dāng)前選中的元素是很容易的事:
代碼如下:
var focusedElement = document.activeElement;

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com