HTML5新增-辅助焦点管理

最新推荐文章于 2026-03-12 00:56:38 发布

原创最新推荐文章于 2026-03-12 00:56:38 发布 · 242 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为博主原创文章，未经博主允许不得转载

收录于

15章

当前文章被收录于：

15章

8 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何使用JavaScript控制页面焦点，包括获取当前拥有焦点的元素、使特定元素获得焦点及检查文档是否获得焦点的方法。通过具体示例展示了activeElement、focus()和hasFocus()等API的应用。

作用（意义）

确定文档是否获得焦点，帮助确定用户是否在操作页面。

属性和方法	含义(作用)
activeElement	始终包含当前拥有焦点的元素(document.activeElement)
focus()	让某个元素自动获得焦点
hasFocus()	返回布尔值，表示文档是否拥有焦点(document.hasFocus())

示例

<button id="myButton">test</button>

<script>
	let button = document.getElementById("myButton");
	button.focus();//让button元素自动获得焦点
	console.log("hasFocus()方法使用的结果为：");
	console.log(document.hasFocus());//检测文档中是否获得焦点
	console.log("activeElement使用的结果为：");
	console.log(document.activeElement === button);//检测当前获得焦点的元素是否是button
</script>