HTMLTextAreaElement: метод setRangeText()

Базовая Широко поддерживается

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

Метод setRangeText() интерфейса HTMLTextAreaElement заменяет выделенный диапазон текста в элементе <textarea> новым текстом, переданным в качестве аргумента.

Дополнительные необязательные параметры включают начало и конец заменяемого диапазона текста и ключевое слово, определяющее, какая часть <textarea> должна быть выделена после обновления текста. Если аргументы startSelection и endSelection не указаны, диапазон предполагается равным выделенному.

Последний аргумент определяет, как будет установлен выделенный диапазон после замены текста. Возможные значения: "select", для выделения вставленного текста; "start", для перемещения выделения перед вставленным текстом; "end", для перемещения выделения после вставленного текста; или по умолчанию "preserve", который пытается сохранить предыдущее выделение.

Кроме того, срабатывают события select и selectchange.

Синтаксис

setRangeText(replacement)
setRangeText(replacement, startSelection)
setRangeText(replacement, startSelection, endSelection)
setRangeText(replacement, startSelection, endSelection, selectMode)

Параметры

replacement: Строка для вставки.
selectionStart Необязательно: Индекс первой выделенной буквы. Индекс, больший длины значения элемента, считается указателем на конец значения.
selectionEnd Необязательно: Индекс символа после последней выделенной буквы. Индекс, больший длины значения элемента, считается указателем на конец значения. Если selectionEnd меньше selectionStart, оба значения рассматриваются как значение selectionEnd.
selectMode Необязательно: Ключевое слово, либо select, либо start, либо end, либо по умолчанию preserve, определяющее, как должно быть установлено выделение после замены текста.

Возвращаемое значение

None (undefined).

Примеры

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

HTML

<label for="ta">Example text input:</label>
<textarea id="ta">
  This text has NOT been updated.
</textarea>
<button id="btn">Update text</button>

JavaScript

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  changeText();
});

function changeText() {
  const textarea = document.getElementById("ta");
  textarea.focus();
  textarea.setRangeText("ALREADY", 14, 17, "select");
}

Результат

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`setRangeText`	24	79	27	15	7	25	27	14	7	1.5	4.4

См. также

<textarea>
HTMLTextAreaElement
HTMLTextAreaElement.select()
HTMLTextAreaElement.setSelectionRange()
HTMLTextAreaElement.textLength
Selection
::selection псевдоэлемент

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