path: root/files/pt-br/web/api/htmlinputelement/setselectionrange/index.html

---
title: HTMLInputElement.setSelectionRange()
slug: Web/API/HTMLInputElement/setSelectionRange
translation_of: Web/API/HTMLInputElement/setSelectionRange
---
<div>{{APIRef("HTML DOM")}}</div>

<p>O método<strong><code>HTMLInputElement.setSelectionRange()</code></strong> define as posições inicial e final da seleção atual do texto em um elemento {{HTMLElement("input")}}.</p>

<p>Opcionalmente, em navegadores mais novos, você pode especificar a direção na qual a seleção deve ser feita; isso permite a você indicar, por exemplo, que a seleção foi feita como se o usuário tivesse clicado no fim do texto selecionado e arrastado em direção ao início.</p>

<p>Esse método atualiza ao mesmo tempo <code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, and <code>selectionDirection</code>.</p>

<h2 id="Syntax">Syntax</h2>

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

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><em>selectionStart</em></dt>
 <dd>The 0-based index of the first selected character.</dd>
 <dt><em>selectionEnd</em></dt>
 <dd>The 0-based index of the character <em>after</em> the last selected character.</dd>
 <dt><em>selectionDirection</em> {{optional_inline}}</dt>
 <dd>A string indicating the direction in which the selection is performed. This string can be "forward" or "backward", or "none" if the direction is unknown or irrelevant.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>The following code:</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>will produce the following:</p>

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

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>9</td>
   <td>8.0</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>selectionDirection</code></td>
   <td>15<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("8.0")}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table" style="height: 104px; width: 1023px;">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>No</td>
  </tr>
  <tr>
   <td><code>selectionDirection</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("8.0")}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] The support for <code>selectionDirection</code> was added Blink in {{WebkitBug("60403")}}.</p>

<p>Note that accordingly to the <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms spec</a> <code>selectionStart</code>, <code>selectionEnd</code> properties and <code>setSelectionRange</code> method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Related links: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">question on StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg bug</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium bug</a>.</p>

<p>[2] The support for <code>selectionDirection</code> was added to Gecko in {{bug("674558")}}.</p>

<p>[3] The support for <code>selectionDirection</code> was added Webkit in {{WebKitBug("60403")}}.</p>

<h2 id="See_also">See also</h2>

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