文档：activeElement 属性

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

通常，如果activeElement在文本选择时，它将返回一个HTMLInputElement或HTMLTextAreaElement对象。如果是这样，您可以使用对象的selectionStart和selectionEnd属性获取更多详细信息。其他时候，焦点元素可能是<select>元素（菜单）或<input>元素。

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

注意： 焦点（哪个元素正在接收用户输入事件）与选择（文档中当前突出显示的部分）不同。您可以使用window.getSelection()获取当前选择。

值

当前具有焦点的Element，<body>或null（如果没有聚焦元素）。

示例

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, false);
textarea2.addEventListener("mouseup", onMouseUp, false);

结果

规范

规范
HTML 标准
# dom-documentorshadowroot-activeelement-dev

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅