J中如何获取焦点，及判断是否获取焦点的方法是什么-群英

上一篇：JavaScript中的if判断逗号表达式含义是什么下一篇：Vue中插槽slot的使用和定义是怎样的

这篇文章主要讲解了“J中如何获取焦点，及判断是否获取焦点的方法是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

有时需要获取页面焦点在哪个元素上，通过焦点可以判断用户是否在操作页面等信息。以前不太方便，要自己记录，`html5`增加`了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，通过这个可以判断用户是否在操作页面。

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"J中如何获取焦点，及判断是否获取焦点的方法是什么"的内容，大家可以关注群英网络的其它相关文章。

标签： js焦点

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。