JavaScript中document.activeELement焦點(diǎn)元素介紹
前言：
有時需要獲取頁面焦點(diǎn)在哪個元素上，通過焦點(diǎn)可以判斷用戶是否在操作頁面等信息。以前不太方便，要自己記錄，html5增加了document.activeElement屬性可以獲取到當(dāng)前激活的焦點(diǎn)。
1、默認(rèn)焦點(diǎn)在body
頁面加載后，document.activeElement是在body上：
console.log(document.activeElement); // 控制臺打?。? // body
2、文本框手動獲取焦點(diǎn)
獲取焦點(diǎn)，最常見的就是表單元素了，這里以文本框?yàn)槔?/strong>
<input type="text" id="name" />
當(dāng)把光標(biāo)放到文本框內(nèi)時，在控制臺查看document.activeElement對象。
document.activeElement：
就是上面獲取焦點(diǎn)的文本框。
3、通過focus獲取焦點(diǎn)
除了手動放到文本框內(nèi)，讓文本框獲取焦點(diǎn)，也可以通過focus()方法讓文本框獲取焦點(diǎn)。
<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切換焦點(diǎn)
網(wǎng)頁中可以通過tab切換焦點(diǎn)，再來一個按鈕試試：
<input type="text" id="name" /> <button>點(diǎn)我</button>
為了方便查看效果，設(shè)置一個定時器，5秒后打印document.activeElement：
setTimeout(() => {
console.log(document.activeElement);
// 火狐瀏覽器控制臺打?。?
// <button>
}, 5000);
訪問頁面，通過tab切換到button按鈕上，然后查看控制臺輸出：
tab切換焦點(diǎn)：
5、document.hasFocus()判斷是否獲取焦點(diǎn)
同樣的設(shè)置定時器查看：
setTimeout(() => {
console.log(document.hasFocus());
}, 5000);
- 訪問頁面時，如果切換到其他頁面，5秒后回來查看就是
false。表示用戶并沒有在操作頁面。 - 如果停留在頁面或者再頁面操作，那么返回true，通過這個可以判斷用戶是否在操作頁面。
到此這篇關(guān)于 JavaScript中document.activeELement焦點(diǎn)元素介紹的文章就介紹到這了,更多相關(guān) JavaScript中document.activeELement焦點(diǎn)元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序 頁面?zhèn)鲄?shí)例詳解的相關(guān)資料,這里對頁面跳轉(zhuǎn)及傳遞參數(shù)的功能做個小示例，幫助大家盡快上手，很簡單，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了commander腳手架工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Thinkphp5微信小程序獲取用戶信息接口的實(shí)例詳解
這篇文章主要介紹了Thinkphp5微信小程序獲取用戶信息接口的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
webpack5之output和devServer的publicPath區(qū)別示例詳解
這篇文章主要為大家介紹了webpack5之output和devServer的publicPath區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Javascript使用integrity屬性進(jìn)行安全驗(yàn)證
這篇文章主要介紹了Javascript使用integrity屬性進(jìn)行安全驗(yàn)證，在html中，script標(biāo)簽可以通過src屬性引入一個js文件，引入的js文件可以是本地的，也可以是遠(yuǎn)程的，下面我們一起來看看文章詳細(xì)內(nèi)容2021-11-11
JS高級程序設(shè)計之class繼承重點(diǎn)詳解
這篇文章主要為大家介紹了JS高級程序設(shè)計之class繼承重點(diǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 安全包括（框架、功能模塊、賬戶使用）詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容，document.execCommand原生JS設(shè)置剪貼板的實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
如何取得中文輸入的真實(shí)長度？...2006-06-06