HTMLTextAreaElement: событие selectionchange

Экспериментально: Это экспериментальная технология
Перед использованием в производстве внимательно ознакомьтесь со таблицей совместимости браузеров.

Событие selectionchange из API выбора срабатывает, когда изменяется выделенный текст в элементе <textarea>. Это включает в себя изменение выделенного диапазона символов или перемещение курсора.

Это событие не может быть отменено.

Обычно это событие обрабатывается путем добавления обработчика событий в элемент <textarea>, и в функции-обработчике считываются свойства HTMLTextAreaElement selectionStart, selectionEnd и selectionDirection.

Также возможно добавить обработчик на глобальное событие onselectionchange и в функции-обработчике использовать Document.getSelection() для получения Selection. Однако это не очень полезно для получения изменений в выделенном тексте.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("selectionchange", (event) => {});

onselectionchange = (event) => {};

Тип события

Общее Event.

Примеры

Пример ниже демонстрирует, как получить выделенный текст в элементе <textarea>.

HTML

<div>
  Enter and select text here:<br /><textarea
    id="my-text"
    rows="2"
    cols="20"></textarea>
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>

JavaScript

const myInput = document.getElementById("my-text");

myInput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myInput.selectionStart;
  document.getElementById("end").textContent = myInput.selectionEnd;
  document.getElementById("direction").textContent = myInput.selectionDirection;
});

Результат

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

Спецификация
Selection API # selectionchange-event
Selection API # dom-globaleventhandlers-onselectionchange

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`selectionchange_event`	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	92	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	Нет	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	92	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	Нет	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document` `selectionchange`. См. баг 40840956 для срабатывания события на элементах `<textarea>`.

© 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/HTMLTextAreaElement/selectionchange_event