initial commit

1 files changed, 110 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html
new file mode 100644
index 0000000000..1dfc53223b
--- /dev/null
+++ b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html
@@ -0,0 +1,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>