脚本宝典收集整理的这篇文章主要介绍了JavaScript中document.activeELement焦点元素介绍,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言:
有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息。以前不太方便,要自己记录,htML5
增加了document.activeElement属性
可以获取到当前激活的焦点。
页面加载后,document.activeElement是在body上:
console.LOG(document.activeElement); // 控制台打印: // body
获取焦点,最常见的就是表单元素了,这里以文本框为例:
当把光标放到文本框内时,在控制台查看document.activeElement
对象。
document.activeElement:
就是上面获取焦点的文本框。
除了手动放到文本框内,让文本框获取焦点,也可以通过focus()
方法让文本框获取焦点。
<input type="text" id="name" /> <script type="text/javascript"> // 文本框获取角度 document.querySelector("#name").focus(); console.log(document.activeElement); // 火狐浏览器控制台打印: // <input id="name" type="text"> </script>
网页中可以通过tab切换焦点,再来一个按钮试试:
<input type="text" id="name" /> <button>点我</button>
为了方便查看效果,设置一个定时器,5秒后打印document.activeElement:
setTimeout(() => { console.log(document.activeElement); // 火狐浏览器控制台打印: // <button> }, 5000);
访问页面,通过tab切换到button按钮上,然后查看控制台输出:
tab切换焦点:
同样的设置定时器查看:
setTimeout(() => { console.log(document.hasFocus()); }, 5000);
false
。表示用户并没有在操作页面。到此这篇关于 JavaScript
中document.activeELement
焦点元素介绍的文章就介绍到这了,更多相关 JavaScript
中document.activeELement
焦点元素内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的JavaScript中document.activeELement焦点元素介绍全部内容,希望文章能够帮你解决JavaScript中document.activeELement焦点元素介绍所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。