前言：

有時需要獲取頁面焦點在哪個元素上，通過焦點可以判斷用戶是否在操作頁面等信息。以前不太方便，要自己記錄，html5增加了document.activeElement屬性可以獲取到當(dāng)前激活的焦點。

1、默認(rèn)焦點在body

頁面加載后，document.activeElement是在body上：

console.log(document.activeElement);

// 控制臺打印：

//    body

2、文本框手動獲取焦點

獲取焦點，最常見的就是表單元素了，這里以文本框為例：

<input type="text" id="name" />

當(dāng)把光標(biāo)放到文本框內(nèi)時，在控制臺查看document.activeElement對象。

document.activeElement：

就是上面獲取焦點的文本框。

3、通過focus獲取焦點

除了手動放到文本框內(nèi)，讓文本框獲取焦點，也可以通過focus()方法讓文本框獲取焦點。

<input type="text" id="name" />

<script type="text/javascript">

    // 文本框獲取角度

    document.querySelector("#name").focus();

    console.log(document.activeElement);

    // 火狐瀏覽器控制臺打?。?

    //    <input id="name" type="text">

</script>

4、tab切換焦點

網(wǎng)頁中可以通過tab切換焦點，再來一個按鈕試試：

<input type="text" id="name" />

<button>點我</button>

為了方便查看效果，設(shè)置一個定時器，5秒后打印document.activeElement：

setTimeout(() => {

    console.log(document.activeElement);

    // 火狐瀏覽器控制臺打印：

    //    <button>

}, 5000);

訪問頁面，通過tab切換到button按鈕上，然后查看控制臺輸出：

tab切換焦點：

5、document.hasFocus()判斷是否獲取焦點

同樣的設(shè)置定時器查看：

setTimeout(() => {

    console.log(document.hasFocus());

}, 5000);

• 訪問頁面時，如果切換到其他頁面，5秒后回來查看就是false。表示用戶并沒有在操作頁面。
• 如果停留在頁面或者再頁面操作，那么返回true，通過這個可以判斷用戶是否在操作頁面。

到此這篇關(guān)于 JavaScript中document.activeELement焦點元素介紹的文章就介紹到這了,更多相關(guān) JavaScript中document.activeELement焦點元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！