返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中document.activeELement焦点元素介绍
  • 578
分享到

JavaScript中document.activeELement焦点元素介绍

2024-04-02 19:04:59 578人浏览 独家记忆
摘要

目录1、默认焦点在body2、文本框手动获取焦点3、通过focus获取焦点4、tab切换焦点5、document.hasFocus()判断是否获取焦点前言: 有时需要获取页面焦点在哪

前言:

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

--结束END--

本文标题: JavaScript中document.activeELement焦点元素介绍

本文链接: https://www.lsjlt.com/news/158234.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中document.activeELement焦点元素介绍
    目录1、默认焦点在body2、文本框手动获取焦点3、通过focus获取焦点4、tab切换焦点5、document.hasFocus()判断是否获取焦点前言: 有时需要获取页面焦点在哪...
    99+
    2024-04-02
  • android 窗口焦点介绍
    背景 我们经常会遇到一种Application does not hava focused window的ANR异常,这种异常一般是没有焦点窗口FocusedWindow导致,且这类异常只会发生在key事件的派发,因为key事件是需要找到一...
    99+
    2023-08-21
    android
  • javascript如何判断元素是否有焦点
    这篇文章主要介绍javascript如何判断元素是否有焦点,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在JavaScript中,可用onfocus()...
    99+
    2024-04-02
  • jQuery遍历节点元素方法介绍
    一、遍历子元素 children()方法可以用来获取元素的所有子元素,语法如下: 示例: <!DOCTYPE html> <html lang="en"> ...
    99+
    2024-04-02
  • CSS中伪元素的简单介绍
    本篇内容主要讲解“CSS中伪元素的简单介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中伪元素的简单介绍”吧!顾名思义,伪元素就是你的文档中若有实无的元...
    99+
    2024-04-02
  • Javascript DOM的简介,节点和获取元素详解
    目录DOM节点元素节点:文本节点:属性节点:获取元素getElementById()getElementsByTagName()getElementsByClassName()总结:...
    99+
    2024-04-02
  • CSS元素类型的详细介绍
    这篇文章主要讲解了“CSS元素类型的详细介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS元素类型的详细介绍”吧!目标1、元素类型分类依据和元素类型分...
    99+
    2024-04-02
  • 焦点在javascript中是什么
    这篇文章主要讲解了“焦点在javascript中是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“焦点在javascript中是什么”吧! ...
    99+
    2024-04-02
  • JavaScript中DOM节点的详细介绍
    本篇内容主要讲解“JavaScript中DOM节点的详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中DOM节点的详细介绍”吧!使用H...
    99+
    2024-04-02
  • CSS中子元素选择器的使用介绍
    这篇文章主要讲解了“CSS中子元素选择器的使用介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中子元素选择器的使用介绍”吧!与后代选择器相比,子元素...
    99+
    2024-04-02
  • CSS中元素定位方法的详细介绍
    这篇文章主要介绍“CSS中元素定位方法的详细介绍”,在日常操作中,相信很多人在CSS中元素定位方法的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中元素定位方法...
    99+
    2024-04-02
  • jquery中元素失去焦点时的触发事件是什么
    这篇“jquery中元素失去焦点时的触发事件是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • MyBatis元素resultMap介绍及使用详解
    1.resultMap resultMap 元素是 MyBatis 中最重要最强大的元素。解决类属性名和数据库中表字段名不一致问题ResultMap 的设计思想是,对简单的语句做到零...
    99+
    2024-04-02
  • 常见的HTML块级元素:简要介绍HTML中常用的块级元素
    常见的HTML块级元素:简要介绍HTML中常用的块级元素,需要具体代码示例HTML(超文本标记语言)是一种用于创建网页结构和内容的标记语言。它由各种标签组成,其中块级元素是常见的一种类型。块级元素是指在HTML文档中占据一整行的元素,并且会...
    99+
    2023-12-23
    html 常见 块级元素 HTML块级元素的
  • CSS中的before和:after伪元素的用法介绍
    本篇内容介绍了“CSS中的before和:after伪元素的用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2024-04-02
  • CSS的子元素选择器用法介绍
    本篇内容介绍了“CSS的子元素选择器用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!基础 子元素选择...
    99+
    2024-04-02
  • JavaScript如何获取元素和节点
    本文小编为大家详细介绍“JavaScript如何获取元素和节点”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript如何获取元素和节点”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
  • css3中伪元素和伪类选择器的详细介绍
    这篇文章主要讲解了“css3中伪元素和伪类选择器的详细介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3中伪元素和伪类选择器的详细介绍”吧!伪类选择...
    99+
    2024-04-02
  • JavaScript的概念及其特点介绍
    这篇文章主要介绍“JavaScript的概念及其特点介绍”,在日常操作中,相信很多人在JavaScript的概念及其特点介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2024-04-02
  • 怎么在HTML5中通过自定义元素实现播放焦点图动画
    这期内容当中小编将会给大家带来有关怎么在HTML5中通过自定义元素实现播放焦点图动画,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。HTML代码<div class="parall...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作