JavaScript中document.activeELement焦点元素介绍

 更新时间:2021年11月24日 11:15:42   作者:快乐编程  
这篇文章主要给大家分享 JavaScript中document.activeELement焦点元素介绍,下面文章围绕了document.activeElement属性展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助

前言:

有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息。以前不太方便,要自己记录,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焦点元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Flask中获取小程序Request数据的两种方法

    Flask中获取小程序Request数据的两种方法

    这篇文章主要介绍了Flask中获取小程序Request数据的两种方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法

    这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下
    2017-06-06
  • js 标签语法使用详情

    js 标签语法使用详情

    这篇文章主要介绍了js 标签语法使用,在 JavaScript 中提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置。本文来记录一下标签语句的使用方法,需要的朋友可以参考一下
    2021-10-10
  • Lambda表达式原理及示例

    Lambda表达式原理及示例

    这篇文章主要介绍了Java8中的新特性Lambda表达式,文中的示例可以帮助大家快速了解该特性,感兴趣的小伙伴可以一起学习
    2021-08-08
  • Javascript设计模式之原型模式详细

    Javascript设计模式之原型模式详细

    这篇文章主要介绍了Javascript设计模式之原型模式,原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能、降低内存占用、代码复用的效果。下面小编将详细介绍 ,需要的朋友可以参考下
    2021-09-09
  • 微信小程序 图片边框解决方法

    微信小程序 图片边框解决方法

    这篇文章主要介绍了微信小程序 图片边框解决方法的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序联网请求的轮播图

    微信小程序联网请求的轮播图

    这篇文章主要介绍了微信小程序联网请求的轮播图的相关资料,需要的朋友可以参考下
    2017-07-07
  • 浅谈克隆 JavaScript

    浅谈克隆 JavaScript

    这篇文章主要介绍了克隆 JavaScript,克隆又有浅克隆与深克隆,文章围绕JavaScript浅克隆与深克隆的相关资料展开具体内容,需要的朋友可以参考一下
    2021-10-10
  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    这篇文章主要向大家介绍的是在面试JS过程中,面试官常常问的几种类型,算法题、涉及js原理的题以及ajax请求等等,刚兴趣的小伙伴请参考下面文章的具体内容
    2021-09-09
  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现

    这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10

最新评论