• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript中document.activeELement焦点元素介绍

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

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

到此这篇关于 JavaScriptdocument.activeELement焦点元素介绍的文章就介绍到这了,更多相关 JavaScriptdocument.activeELement焦点元素内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue监听属性图文实例详解发布时间:2022-02-05
下一篇:
JavaScript中MutationObServer监听DOM元素详情发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap