Document: thuộc tính activeElement
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc activeElement của giao diện Document trả về Element trong DOM đang nhận các sự kiện bàn phím như keydown và keyup. Thuộc tính này thường tương đương với phần tử đang được focus.
Các phần tử nào có thể được focus thay đổi tùy thuộc vào nền tảng và cấu hình hiện tại của trình duyệt. Ví dụ: trên Safari, theo hành vi của macOS, các phần tử không phải là phần tử nhập văn bản sẽ không thể được focus theo mặc định, trừ khi cài đặt "Full Keyboard Access" được bật trong System Settings.
Thông thường, người dùng có thể nhấn phím Tab để di chuyển focus quanh trang giữa các phần tử có thể focus và sử dụng các phím tắt bàn phím như Space hoặc Enter để mô phỏng thao tác nhấp vào phần tử đang được focus.
Note:
Focus (phần tử nào đang nhận sự kiện đầu vào của người dùng) không giống như selection (phần được đánh dấuhighlight hiện tại của tài liệu). Bạn có thể lấy selection hiện tại bằng cách sử dụng window.getSelection().
Giá trị
Element sâu nhất hiện đang có focus.
- Nếu phần tử đang được focus nằm trong một shadow tree bên trong tài liệu hiện tại (ví dụ: phần tử đang được focus nằm bên trong
iframe, vàdocumentgọi chứa iframe đó), thì đây sẽ là phần tử gốc của tree đó (trong ví dụ này làiframe). - Nếu phần tử đang được focus nằm trong một document tree không phải là con cháu của tài liệu hiện tại (ví dụ: phần tử đang được focus nằm trong tài liệu chính, và
documentgọi là một iframe được nhúng), thì đây sẽ lànull. - Nếu không có phần tử nào đang được focus, đây là
Document.bodyhoặcDocument.documentElement.
Ví dụ
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
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);
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |