JavaScript中document.activeELement焦点元素介绍

目录
  • 1、默认焦点在body
  • 2、文本框手动获取焦点
  • 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，通过这个可以判断用户是否在操作页面。

到此这篇关于 JavaScript中document.activeELement焦点元素介绍的文章就介绍到这了,更多相关 JavaScript中document.activeELement焦点元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript+HTML5自定义元素播放焦点图动画

    javascript+HTML5自定义元素播放焦点图动画

    这是一款基于HTML5的焦点图动画,它和其他焦点图不同的地方在于,它播放的不仅仅是图片,而是可以自定义控制的网页元素.它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散.重新组合等,这款HTML5动画图片播放器算得上是高端大气上档次. 效果图: HTML代码 <div class="parallax-bg" id="slider-wrap"> <div class="slider para

  • 使用JS取得焦点(focus)元素代码

    对于良好的用户体验来说,网站/web app的可访问性和可用性,以及功能 都是至关重要的. 当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到. 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理,但这又是开发人员常常会忽视的一点. 对输入焦点处理很差的一个例子: 在点击一个链接以后打开一个窗口,但却不将光标聚焦到窗口中的任何元素内. 甚至更糟的是: 聚焦到模态窗口中的某个元素,但在关闭以后焦点照样不返回. 理想情况下,在触发链接时会

  • JavaScript 关于元素获取焦点(隐藏元素与div)

    1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我

  • JavaScript中document.activeELement焦点元素介绍

    JavaScript中document.activeELement焦点元素介绍

    目录 1.默认焦点在body 2.文本框手动获取焦点 3.通过focus获取焦点 4.tab切换焦点 5.document.hasFocus()判断是否获取焦点 前言: 有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息.以前不太方便,要自己记录,html5增加了document.activeElement属性可以获取到当前激活的焦点. 1.默认焦点在body 页面加载后,document.activeElement是在body上: console.log(documen

  • 关于Javascript中document.cookie的使用

    设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格. 在cookie的名中做到这点很容易,但要保存的值是不确定的

  • JavaScript中的useRef 和 useState介绍

    目录 1.useState hook 2.useRef hook 3.useRef 与 useState 4.何时使用 Refs 和 States 1.useState hook useState 是一个内置的 React hook,它允许您将信息作为状态存储在变量中.它允许您将 React 状态添加到功能组件.在下面的示例中,useState()声明状态变量,而值存储在计数变量中.setCount是用于更新此值的函数. //从 react 导入 useState import React, {

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • javascript中去除数组重复元素的实现方法【实例】

    在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现: <script language="javascript"> <!-- /*判断数组中是否存在某个元素的方法*/ function isExistInArr(_array, _element){ if(!_array || !_element) return false; if(!_array.length){ return (_array == _elemen

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • 基于JavaScript中标识符的命名规则介绍

    JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词外,其余单词的首字母大写,例如:trueName 2.蛇型命名法 单词之间用_隔开,例如:true_name (注:大多数情况下,以1~2个下划线开始的标识符,代表特殊变量或内部变量,我们在自己定义的时候,尽量避免使用以下划线开头的变量) (粗浅的见解,望批评指正) 以上这篇基于JavaScript

  • JavaScript中的property和attribute介绍

    JavaScript中的property和attribute介绍

    首先看看这两个单词的英文释义(来自有道词典).先是property: 复制代码 代码如下: property ['prɔpəti] n. 性质,性能:财产:所有权 英英释义: any area set aside for a particular purpose "the president was concerned about the property across from the White House" 同义词:place something owned; any tangi

  • JavaScript中document.referrer的用法详解

    JavaScript中document.referrer的用法详解

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL. 前面两个很好理解,而referrer属性简单来说就是上一个页面的URL.那么这个属性具体有什么用处呢? 在H5页面中,我们经常要在头部加个返回上一个页面按钮,就像下面这样的: 页面头部 点击左侧的元素可以返回到上

  • JavaScript中的return语句简单介绍

    return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; return a+b; } func

随机推荐