当前位置: 首页 > news >正文

HTML5 增加了辅助 DOM 焦点管理的功能

焦点管理

​ HTML5 增加了辅助 DOM 焦点管理的功能。

​ activeElement 可以用来查询文档,确定哪个元素拥有焦点,hasFocus() 方法可以查询文档是否获得了焦点, 而这对于保证 Web 应用程序的无障碍使用是非常重要的。无障碍 Web 应用程序的一个重要方面就是焦点管理,而能够确定哪个元素当前拥有焦点(相比于之前的猜测)是一个很大的进步。

activeElement

​ document.activeElement,始终包含当前拥有焦点的 DOM 元素。页面加载时,可以通过用户输入(按 Tab 键或代码中使用 focus() 方法)让某个元素自动获得焦点。例如:

let button = document.getElementById("myButton"); 
button.focus(); 
console.log(document.activeElement === button); // true

​ 默认情况下,document.activeElement 在页面刚加载完之后会设置为 document.body。而在页面完全加载之前,document.activeElement 的值为 null。

hasFocus()

​ document.hasFocus() 方法,该方法返回布尔值,表示文档是否拥有焦点:

let button = document.getElementById("myButton"); 
button.focus(); 
console.log(document.hasFocus()); // true

​ 确定文档是否获得了焦点,就可以帮助确定用户是否在操作页面。

相关文章:

  • python中写monogo的uri参数里,为什么有多个IP,是连接多个服务器吗
  • FPS游戏漫谈System.GC.Collect()强制进行垃圾回收
  • HttpServlet详解
  • 【蓝桥杯单片机入门记录】动态数码管
  • IDEA启动Springboot报错:无效的目标发行版:17 的解决办法
  • 【java】使用springMVC优雅的响应数据
  • 【Spring连载】使用Spring Data访问 MongoDB(十一)----加密Encryption (CSFLE)
  • 【加密算法】AES对称加密算法简介
  • 基于smilehappiness-framework-base,快速集成ShardingSphere JDBC
  • 请求包的大小会影响Redis每秒处理请求数量
  • linux部署nginx
  • 【JavaEE】_tomcat的安装与使用
  • Android Gradle 开发与应用 (一) : Gradle基础
  • spring Boot快速入门
  • Java MP3转PCM
  • ES6指北【2】—— 箭头函数
  • Apache的基本使用
  • Elasticsearch 参考指南(升级前重新索引)
  • GitUp, 你不可错过的秀外慧中的git工具
  • HTTP中GET与POST的区别 99%的错误认识
  • java8 Stream Pipelines 浅析
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • JavaScript对象详解
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • Web设计流程优化:网页效果图设计新思路
  • 编写符合Python风格的对象
  • 分布式任务队列Celery
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 技术发展面试
  • 思维导图—你不知道的JavaScript中卷
  • 微信小程序设置上一页数据
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 阿里云服务器购买完整流程
  • 移动端高清、多屏适配方案
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​批处理文件中的errorlevel用法
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • #在 README.md 中生成项目目录结构
  • (30)数组元素和与数字和的绝对差
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (五)关系数据库标准语言SQL
  • (已解决)什么是vue导航守卫
  • ***通过什么方式***网吧
  • .mysql secret在哪_MYSQL基本操作(上)
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • .NetCore实践篇:分布式监控Zipkin持久化之殇
  • .NET单元测试
  • .net通用权限框架B/S (三)--MODEL层(2)
  • /bin/rm: 参数列表过长"的解决办法
  • :中兴通讯为何成功
  • @JoinTable会自动删除关联表的数据
  • [20171106]配置客户端连接注意.txt
  • [ai笔记9] openAI Sora技术文档引用文献汇总
  • [Angular] 笔记 20:NgContent