--- title: HTMLInputElement.setSelectionRange() slug: Web/API/HTMLInputElement/setSelectionRange tags: - API - HTML DOM - HTMLInputElement - Method - Reference - Text Field Selection API translation_of: Web/API/HTMLInputElement/setSelectionRange ---
{{APIRef("HTML DOM")}}

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

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

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

Синтаксис

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

Параметры

selectionStart
Индекс первого выделенного символа.
selectionEnd
Индекс символа после последнего выделенного символа.
selectionDirection {{optional_inline}}
Строка, определяющая направления произведенного выделения. Принимаются значения "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

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

Спецификация Статус Комментарии
{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange")}} {{Spec2("HTML WHATWG")}} Без изменений
{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}} {{Spec2("HTML5.1")}} Без изменений
{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}} {{Spec2("HTML5 W3C")}} Изначальное определение

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

{{CompatibilityTable}}

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0 {{CompatGeckoDesktop("1.0")}} 9 8.0 {{CompatVersionUnknown}}
selectionDirection 15[1] {{CompatGeckoDesktop("8.0")}}[2] {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}[3]
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
selectionDirection {{CompatUnknown}} {{CompatGeckoMobile("8.0")}}[2] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Поддержка selectionDirection была добавлена Blink в {{WebkitBug("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 в {{bug("674558")}}.

[3] Поддержка selectionDirection была добавлена в Webkit в {{WebKitBug("60403")}}.

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