文档：activeElement 属性
activeElement 是 Document 接口的一个只读属性，它返回 DOM 中正在接收键盘事件（如 keydown 和 keyup）的 Element。这通常等同于具有焦点的元素。
哪些元素可以获得焦点取决于平台和浏览器当前的配置。例如，在 Safari 中，遵循 macOS 的行为，默认情况下，非文本输入元素无法获得焦点，除非在“系统设置”中启用了“完全键盘访问”设置。
通常，用户可以通过按 Tab 键在页面中具有焦点的元素之间移动焦点，并使用 Space 或 Enter 等键盘手势来模拟对具有焦点元素的点击。
注意： 焦点（哪个元素正在接收用户输入事件）与选择（文档当前被高亮显示的部分）是不同的。你可以使用 window.getSelection() 来获取当前选择。
值
当前具有焦点的最深层 Element。
- 如果具有焦点的元素位于当前文档内的 shadow tree 中（例如，具有焦点的元素在
iframe内部，而调用该属性的document包含该 iframe），那么它将是该树的根元素（在此示例中，就是那个iframe）。 - 如果具有焦点的元素位于不属于当前文档的文档树中（例如，具有焦点的元素在主文档中，而调用该属性的
document是一个嵌入的 iframe），那么它将是null。 - 如果没有元素具有焦点，则此属性返回
Document.body或Document.documentElement。
示例
HTML
html
<p>Select some text from one of the text areas below:</p>
<form>
<textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
This is Text Area One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
>
<textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
>
</form>
<p>Active element ID: <em id="output-element"></em></p>
<p>Selected text: <em id="output-text"></em></p>
JavaScript
js
function onMouseUp(e) {
const activeTextarea = document.activeElement;
const selection = activeTextarea.value.substring(
activeTextarea.selectionStart,
activeTextarea.selectionEnd,
);
const outputElement = document.getElementById("output-element");
const outputText = document.getElementById("output-text");
outputElement.textContent = activeTextarea.id;
outputText.textContent = selection;
}
const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp);
textarea2.addEventListener("mouseup", onMouseUp);
结果
规范
| 规范 |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |
浏览器兼容性
加载中…