files/ru/web/api/htmlinputelement/setselectionrange/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

---
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>

{{Specifications}}

<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>