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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
详细的大学生创业计划书模板
2014/01/27 职场文书
安全教育实施方案
2014/03/02 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
模特大赛策划方案
2014/05/28 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
浅谈MySQL函数
2021/10/05 MySQL
python微信智能AI机器人实现多种支付方式
2022/04/12 Python