DocumentOrShadowRoot.activeElement

Document 和 ShadowRoot 接口的 activeElement 只读属性,用来返回当前在DOM或者shadow DOM树中处于聚焦状态的Element

通常情况下,如果 HTMLInputElement 或者 HTMLTextAreaElement元素中有文字被选中时, activeElement属性就会返回该元素 。这时,你可以调用该元素的selectionStartselectionEnd 属性获取更多选中文字的信息. 其他情况下,焦点元素也可能是<select>元素 (menu) 或者一个别的 <input> 元素, 比如 "button", "checkbox", 或者 "radio".

通常用户可以使用tab键来切换页面中的焦点元素获得焦点, 使用空格键使元素active (比如按下一个按钮或者 切换一个 radio). 具体哪些元素可以获得焦点与系统和浏览器的设置有关。比如, 在 macOS 系统上, 不是text input元素默认情况下是不能获得焦点的。

Note: Focus (可收到input事件的元素) 和 selection (目前页面被高亮的部分)不是一回事. 你可以通过 window.getSelection()获取当前用户选择的文本.

Syntax

element = DocumentOrShadowRoot.activeElement

Value

当前获得焦点的 Element ,如果没有焦点元素,会返回 <body> 或者 null 。

Example

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: <b id="output-element"></b></p>
<p>Selected text: <b id="output-text"></b></p>

JavaScript

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);

Result

Specifications

Specification Status Comment
HTML Living Standard
activeElement
Living Standard