The HTMLInputElement.setSelectionRange()
method sets the start and end positions of the current text selection in an <input>
or <textarea>
element.
Optionally, in newer browser versions, you can specify the direction in which selection should be considered to have occurred. This lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning.
This method updates the HTMLInputElement.selectionStart
, selectionEnd
, and selectionDirection
properties in one call.
Note that accordingly to the WHATWG forms spec selectionStart
, selectionEnd
properties and setSelectionRange
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".
If you wish to select all text of an input element, you can use the HTMLInputElement.select() method instead.
Syntax
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
Parameters
If selectionEnd
is less than selectionStart
, then both are treated as the value of selectionEnd
.
selectionStart
- The 0-based index of the first selected character. An index greater than the length of the element's value is treated as pointing to the end of the value.
selectionEnd
- The 0-based index of the character after the last selected character. An index greater than the length of the element's value is treated as pointing to the end of the value.
selectionDirection
Optional- A string indicating the direction in which the selection is considered to have been performed. Possible values:
"forward"
"backward"
"none"
if the direction is unknown or irrelevant. Default value.
Example
Click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "Mozilla").
HTML
<input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>
JavaScript
function selectText() {
const input = document.getElementById('text-box');
input.focus();
input.setSelectionRange(2, 5);
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of 'HTMLInputElement.setSelectionRange()' in that specification. | Living Standard | No change |
HTML 5.1The definition of 'HTMLInputElement.setSelectionRange()' in that specification. | Recommendation | No change |
HTML5The definition of 'HTMLInputElement.setSelectionRange()' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setSelectionRange
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 9 |
Opera
Full support 8 |
Safari
Full support 3 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
HTMLInputElement.setSelectionRange() by Mozilla Contributors is licensed under CC-BY-SA 2.5.