JavaScript中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，借此可以判断用户是否正在操作页面。

至此，关于 JavaScript中document.activeELement焦点元素介绍的文章内容已介绍完毕，更多相关 JavaScript中document.activeELement焦点元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！