HTMLInputElement.setSelectionRange()

Метод HTMLInputElement.setSelectionRange() устанавливает начальное и конечное положение выделения текста в элементе <input>.

В более новых версиях браузеров, можно дополнительно установить направление выделения текста, что позволит, например, определить, что выделение сделано нажатием и перетаскиванием курсора мыши от конца выделенного текста до начала.

Этот метод позволяет одним вызовом обновить свойства HTMLInputElement.selectionStart, selectionEnd, и selectionDirection.

Синтаксис

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

Параметры

selectionStart
Индекс первого выделенного символа.
selectionEnd
Индекс символа после последнего выделенного символа.
selectionDirection Необязательный
Строка, определяющая направления произведённого выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвестно или неважно.

Пример

Следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>JS Bin</title>
<script>
function SelectText () {
        var input = document.getElementById("mytextbox");
            input.focus();
            input.setSelectionRange(2,5);
}
</script>
</head>
<body>
  <p><input type="text" id="mytextbox" size="20" value="Mozilla"/></p>
  <p><button onclick="SelectText()">Select text</button></p>
</body>
</html>

приведёт к следующему результату:

example.png

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

Спецификация Статус Комментарии
HTML Living Standard
Определение 'HTMLInputElement.setSelectionRange' в этой спецификации.		 Живой стандарт Без изменений
HTML 5.1
Определение 'HTMLInputElement.setSelectionRange' в этой спецификации.		 Рекомендация Без изменений
HTML5
Определение 'HTMLInputElement.setSelectionRange' в этой спецификации.		 Рекомендация Изначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 1.0 (1.7 или ранее) 9 8.0 (Да)
selectionDirection 15[1] 8.0 (8.0)[2] ? ? (Да)[3]
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ?
selectionDirection ? 8.0 (8.0)[2] ? ? ?

[1] Поддержка selectionDirection была добавлена Blink в Баг WebKit 60403.

Требуется отметить, что согласно спецификации WHATWG forms свойства selectionStart, selectionEnd и метод setSelectionRange применяются только к элементам input c типами text, search, URL, tel и password. Начиная с версии 33, Chrome, выдаёт исключение во время попытки доступа к этим свойствам и методу на других типах элемента input. Например, для элемента input типа number появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: вопрос на StackOverflow, whatwg баг, Chromium баг.

[2] Поддержка selectionDirection была добавлена в Gecko в баг 674558.

[3] Поддержка selectionDirection была добавлена в Webkit в Баг WebKit 60403.

Смотрите также