当前位置：文江博客知识库简体中文文档 Web API DocumentOrShadowRoot activeElement

DocumentOrShadowRoot.activeElement - Web API 接口参考编辑

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

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

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

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

Syntax

element = DocumentOrShadowRoot.activeElement

<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

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

分享到QQ

分享到微博