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 相关文章推荐
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
简单实现node.js图片上传
Dec 18 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
JavaScript ES6的函数拓展
Jan 18 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
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python内置异常类型全面汇总
2020/05/28 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
终止合同协议书
2014/04/17 职场文书
法人任命书范本
2014/06/04 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
500字作文之关于爸爸
2019/11/14 职场文书