HTMLInputElement: событие selectionchange

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

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

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

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

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

Синтаксис

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

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

onselectionchange = (event) => {};

Тип события

Общее Event.

Примеры

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

HTML

<div>
  Enter and select text here:<br /><input id="my-text" rows="2" cols="20" />
</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`. См. баг 40840956 для запуска события на элементах `<input>`.	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.	92	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.	Нет	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.	92	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.	Нет	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.	Нет Событие `selectionchange` срабатывает на `Document`, см. событие `Document`. См. баг 40840956 для запуска события на элементах `<input>`.

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