---
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
---
<div>{{APIRef("HTML DOM")}}</div>

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

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

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

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">inputElement.setSelectionRange(<var>selectionStart</var>, <var>selectionEnd</var>, [optional] <var>selectionDirection</var>);
</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><em>selectionStart</em></dt>
 <dd>Индекс первого выделенного символа.</dd>
 <dt><em>selectionEnd</em></dt>
 <dd>Индекс символа <em>после</em> последнего выделенного символа.</dd>
 <dt><em>selectionDirection</em> {{optional_inline}}</dt>
 <dd>Строка, определяющая направления произведённого выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвестно или неважно.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<p>Следующий код:</p>

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

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

<p><img alt="example.png" class="default internal" src="/@api/deki/files/6104/=example.png"></p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("api.HTMLInputElement.setSelectionRange")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{HTMLElement("input")}}</li>
 <li>{{domxref("HTMLInputElement")}}</li>
 <li>{{domxref("Selection")}}</li>
</ul>