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
确定文档是否获得了焦点,就可以帮助确定用户是否在操作页面。