JavaScript中document.activeELement焦点元素介绍


Posted in Javascript onNovember 27, 2021

前言:

有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息。以前不太方便,要自己记录,html5增加了document.activeElement属性可以获取到当前激活的焦点。

1、默认焦点在body

页面加载后,document.activeElement是在body上:

console.log(document.activeElement);

// 控制台打印:

//    body

2、文本框手动获取焦点

获取焦点,最常见的就是表单元素了,这里以文本框为例:

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

当把光标放到文本框内时,在控制台查看document.activeElement对象。

document.activeElement:

JavaScript中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切换焦点:

JavaScript中document.activeELement焦点元素介绍

5、document.hasFocus()判断是否获取焦点

同样的设置定时器查看:

setTimeout(() => {

    console.log(document.hasFocus());

}, 5000);
  • 访问页面时,如果切换到其他页面,5秒后回来查看就是false。表示用户并没有在操作页面。
  • 如果停留在页面或者再页面操作,那么返回true,通过这个可以判断用户是否在操作页面。

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

Javascript 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
利用JavaScript写一个简单计算器
JavaScript中的宏任务和微任务详情
Nov 27 #Javascript
前端监听websocket消息并实时弹出(实例代码)
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
利用js实现简单开关灯代码
Nov 23 #Javascript
详解Vue的列表渲染
Nov 20 #Vue.js
详解JS数组方法
Nov 20 #Javascript
You might like
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
JavaScript中闭包的详解
2017/04/01 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
JS实现json数组排序操作实例分析
2019/10/28 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python回调函数中使用多线程的方法
2017/12/25 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python selenium 获取接口数据的实现
2020/12/07 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
土木工程求职信
2014/05/29 职场文书
升职自荐信范文
2015/03/27 职场文书
立春观后感
2015/06/18 职场文书
医院病假条怎么写
2015/08/17 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript