HTMLInputElement: свойство selectionEnd

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

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

Свойство selectionEnd интерфейса HTMLInputElement — это число, представляющее конечный индекс выделенного текста. При отсутствии выделения возвращает смещение символа, следующего за текущей позицией курсора ввода.

Примечание: Согласно спецификации WHATWG forms spec свойство selectionEnd применяется только к элементам ввода типа text, search, URL, tel и password. В современных браузерах при попытке установить свойство selectionEnd для остальных типов элементов ввода возникает исключение. Кроме того, при обращении к свойству selectionEnd для элементов ввода, отличных от текстовых, возвращается значение null.

Если значение selectionEnd меньше значения selectionStart, оба значения рассматриваются как значение свойства selectionEnd.

Значение

Неотрицательное число.

Примеры

HTML

<!-- using selectionEnd on non text input element -->
<label for="color">selectionStart property on type=color</label>
<input id="color" type="color" />

<!-- using selectionEnd on text input element -->
<fieldset>
  <legend>selectionEnd property on type=text</legend>
  <label for="pin">Input PIN</label>
  <input type="text" id="pin" value="impossible PIN: 102-12-145" />
  <button id="pin-btn" type="button">PIN correction</button>
</fieldset>

JavaScript

const colorEnd = document.getElementById("color");
const text = document.querySelector("#pin");
const pinBtn = document.querySelector("#pin-btn");
const validPinChecker = /[^\d{3}-\d{2}-\d{3}]/g;
const selectionEnd = text.value.length;
const selectedText = text.value.substring(text.selectionStart, selectionEnd);

pinBtn.addEventListener("click", () => {
  const correctedText = selectedText.replace(validPinChecker, "");
  text.value = correctedText;
});

// open browser console to verify output
console.log(colorEnd.selectionEnd); // Output : null

Результат

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

Спецификация
HTML # dom-textarea/input-selectionend

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`selectionEnd`	1	12	1	≤12.1	1.3	18	4	≤12.1	1	1.0	4.4

См. также

HTMLTextAreaElement.selectionEnd свойство
HTMLInputElement.selectionStart свойство
HTMLInputElement.setSelectionRange метод

© 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/selectionEnd