JavaScript中document.activeELement焦點元素介紹

更新時間：2021年11月24日 11:15:42 作者：快樂編程

這篇文章主要給大家分享 JavaScript中document.activeELement焦點元素介紹，下面文章圍繞了document.activeElement屬性展開詳細內容,需要的朋友可以參考一下，希望對大家有所幫助

1、默認焦點在body

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

console.log(document.activeElement);

// 控制臺打?。?

//    body

2、文本框手動獲取焦點

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

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

當把光標放到文本框內時，在控制臺查看document.activeElement對象。

document.activeElement：

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

3、通過focus獲取焦點

除了手動放到文本框內，讓文本框獲取焦點，也可以通過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切換焦點

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

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

<button>點我</button>

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

setTimeout(() => {

    console.log(document.activeElement);

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

    //    <button>

}, 5000);

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

tab切換焦點：

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

同樣的設置定時器查看：

setTimeout(() => {

    console.log(document.hasFocus());

}, 5000);

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

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

您可能感興趣的文章: