Document:activeElement 属性

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

通常情况下,activeElement 会返回 HTMLInputElementHTMLTextAreaElement 对象(如果当前有文本选择)。如果是这样,你可以通过使用对象的 selectionStartselectionEnd 属性来获取更多详细信息。其他时候,获得焦点的元素可能是 <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

参见