文件：activeElement 屬性
activeElement 是 Document 介面的一個只讀屬性，它返回 DOM 中正在接收鍵盤事件（如 keydown 和 keyup）的 Element。這通常等同於具有焦點的元素。
哪些元素可以獲得焦點取決於平臺和瀏覽器當前的配置。例如，在 Safari 中，遵循 macOS 的行為，預設情況下，非文字輸入元素無法獲得焦點，除非在“系統設定”中啟用了“完全鍵盤訪問”設定。
通常，使用者可以透過按 Tab 鍵在頁面中具有焦點的元素之間移動焦點，並使用 Space 或 Enter 等鍵盤手勢來模擬對具有焦點元素的點選。
注意： 焦點（哪個元素正在接收使用者輸入事件）與選擇（文件當前被高亮顯示的部分）是不同的。你可以使用 window.getSelection() 來獲取當前選擇。
值
當前具有焦點的最深層 Element。
- 如果具有焦點的元素位於當前文件內的 shadow tree 中（例如，具有焦點的元素在
iframe內部，而呼叫該屬性的document包含該 iframe），那麼它將是該樹的根元素（在此示例中，就是那個iframe）。 - 如果具有焦點的元素位於不屬於當前文件的文件樹中（例如，具有焦點的元素在主文件中，而呼叫該屬性的
document是一個嵌入的 iframe），那麼它將是null。 - 如果沒有元素具有焦點，則此屬性返回
Document.body或Document.documentElement。
示例
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);
textarea2.addEventListener("mouseup", onMouseUp);
結果
規範
| 規範 |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |
瀏覽器相容性
載入中…