files/zh-cn/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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

---
title: HTMLInputElement.setSelectionRange()
slug: Web/API/HTMLInputElement/setSelectionRange
tags:
  - API
  - HTML DOM
  - HTMLInputElement
  - 参考
  - 文本选择
  - 方法
translation_of: Web/API/HTMLInputElement/setSelectionRange
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLInputElement.setSelectionRange</code> </strong>方法用于设定{{HTMLElement("input")}} 或 {{HTMLElement("textarea")}} 元素中当前选中文本的起始和结束位置。</p>

<p>在较新的浏览器中，你可以通过一个可选的 selectionDirection 来指定文本选中的方向。比如通过点击和拖动从结束位置往起始位置选中一个字符串。</p>

<p>每次调用这个这个方法都会更新 <code>HTMLInputElement</code> 的 <code>selectionStart</code>, <code>selectionEnd</code> 和 <code>selectionDirection</code> 属性。</p>

<p>要注意的是，在 <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms spec</a> 中，<code>selectionStart</code>, <code>selectionEnd</code> 属性和 <code>setSelectionRange</code> 方法只能应用于类型为文本、搜索、链接、电话号码和密码的输入。Chrome 从版本 33 开始会在访问其余类型的这些属性和方法时抛出异常。例如，输入类型为数字时会抛出：“不能从'HTMLInputElement'中读取'selectionStart'属性：输入元素的类型('number')不支持选择（Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection）”。</p>

<p>如果你希望<strong>全选</strong>输入元素中的文本，你可以使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select">HTMLInputElement.select()</a> 方法。</p>

<h2 id="语法">语法</h2>

<pre><em>element</em>.setSelectionRange(<em>selectionStart</em>, <em>selectionEnd</em> [, <em>selectionDirection</em>]);</pre>

<h3 id="参数">参数</h3>

<p>如果 <code>selectionEnd</code> 小于 <code>selectionStart</code>，则二者都会被看作 <code>selectionEnd</code>。</p>

<dl>
 <dt><code>selectionStart</code></dt>
 <dd>被选中的第一个字符的位置索引，从0开始。如果这个值比元素的 <code>value</code> 长度还大，则会被看作 <code>value</code> 最后一个位置的索引。</dd>
 <dt><code>selectionEnd</code></dt>
 <dd>被选中的最后一个字符的 <em>下一个</em> 位置索引。如果这个值比元素的value长度还大，则会被看作value最后一个位置的索引。</dd>
 <dt><code>selectionDirection</code> {{optional_inline}}</dt>
 <dd>一个表示选择方向的字符串，可能的值有：</dd>
</dl>

<ul>
 <li><code>"forward"</code></li>
 <li><code>"backward"</code></li>
 <li><code>"none"</code> 默认值，表示方向未知或不相关。</li>
</ul>

<h2 id="示例">示例</h2>

<p>在这个示例中，按下按钮以选择文本框中第三、四、五个字符（即“Mozilla”中的“zil”）。</p>

<h3 id="HTML">HTML</h3>

<pre>&lt;input type="text" id="text-box" size="20" value="Mozilla"&gt;
&lt;button onclick="selectText()"&gt;Select text&lt;/button&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre>function selectText() {
  const input = document.getElementById('text-box');
  input.focus();
  input.setSelectionRange(2, 5);
}</pre>

<h3 id="结果">结果</h3>

<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange$samples/Example?revision=1557137"></iframe></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>No change</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>No change</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

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

<h2 id="相关内容">相关内容</h2>

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