Document：activeElement 属性

Document 接口的 activeElement 只读属性返回 DOM 中当前拥有焦点的 Element。

通常情况下，activeElement 会返回 HTMLInputElement 或 HTMLTextAreaElement 对象（如果当前有文本选择）。如果是这样，你可以通过使用对象的 selectionStart 和 selectionEnd 属性来获取更多详细信息。其他时候，获得焦点的元素可能是 <select> 元素（菜单）或 <input> 元素。

一般来说，用户可以按 Tab 键在页面上的可聚焦元素中移动焦点，并使用空格键来激活其中一个元素（例如按下按钮或切换单选按钮）。哪些元素可以聚焦取决于平台和浏览器的当前配置。例如，在 macOS 系统上，不是文本输入元素通常默认为不可聚焦。

备注： 焦点（正在接收用户输入事件的元素）与选择（文档中当前高亮的部分）不是一回事。你可以使用 window.getSelection() 获取当前选择。

值

当前聚焦的 Element；如果没有聚焦元素，则为 <body> 或 null。

示例

HTML

html
<p>从下面的文本区域中选择一些文本：</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
    这里是一号文本区。这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。
  </textarea>
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
    这里是二号文本区。这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。
  </textarea>
</form>

<p>激活的元素的 ID：<em id="output-element"></em></p>
<p>选中文本：<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.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);

结果

规范

Specification
HTML Standard
# dom-documentorshadowroot-activeelement-dev

浏览器兼容性

BCD tables only load in the browser

参见