Spec-Zone.ru › Web APIs

Документ: свойство activeElement

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

activeElement только для чтения свойство интерфейса Document возвращает Element в DOM, который в данный момент имеет фокус.

Часто activeElement вернёт объект HTMLInputElement или HTMLTextAreaElement, если у него есть выделенный текст. В таком случае вы можете получить больше деталей, используя свойства объекта selectionStart и selectionEnd. В других случаях фокусированный элемент может быть элементом <select> (меню) или элементом <input>.

Обычно пользователь может нажать клавишу Tab, чтобы переместить фокус по странице среди элементов, которые могут получить фокус, и использовать пробел для активации элемента (например, для нажатия кнопки или переключения радиокнопки). Какие элементы могут получить фокус, зависит от платформы и текущей конфигурации браузера. Например, в системах macOS элементы, которые не являются текстовыми полями ввода, как правило, по умолчанию не могут получить фокус.

Примечание: Фокус (элемент, который получает события пользовательского ввода) не то же самое, что выделение (текущая выделенная часть документа). Текущее выделение можно получить, используя window.getSelection().

Значение

Element, который в данный момент имеет фокус, <body> или null, если нет элемента с фокусом.

Примеры

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

Результат

Спецификации

Спецификация
HTML
# dom-documentorshadowroot-activeelement-dev

Совместимость с браузерами

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
activeElement 2 12 3 ≤12.1 7
4–7Поддерживается только для HTMLDocument, а не для всех Document объектов.
18 4 ≤12.1 7
3.2–7Поддерживается только для HTMLDocument, а не для всех Document объектов.
1.0 ≤37

См. также

  • Document.hasFocus

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API