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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
VSCode搭建React Native环境
May 07 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分页显示制作详细讲解
2008/11/19 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python中is与==判断的区别
2017/03/28 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
最新远光软件笔试题面试题内容
2013/11/08 面试题
高一英语教学反思
2014/01/22 职场文书
读书活动实施方案
2014/03/10 职场文书
本科毕业生求职信
2014/06/15 职场文书
给朋友的道歉短信
2015/05/12 职场文书
电影建党伟业观后感
2015/06/01 职场文书
员工规章制度范本
2015/08/07 职场文书
《静夜思》教学反思
2016/02/17 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书