HTMLInputElement: setSelectionRange() method
The HTMLInputElement.setSelectionRange()
method sets the start and end positions of the current text selection in an <input>
or <textarea>
element.
The element must be focused for the call to have any effect.
Optionally, 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
, HTMLInputElement.selectionEnd
, and HTMLInputElement.selectionDirection
properties in one call.
The element must be of one of the following input types: password
, search
, tel
, text
, or url
. Otherwise the browser throws an InvalidStateError
exception.
If you wish to select all text of an input element, you can use the HTMLInputElement.select() method instead.
Syntax
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
Parameters
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. If
selectionEnd
is less thanselectionStart
, then both are treated as the value ofselectionEnd
. 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.
Return value
None (undefined
).
Exceptions
InvalidStateError
DOMException
-
Thrown if the element is not one of the following input types:
password
,search
,tel
,text
, orurl
.
Examples
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 |
---|
HTML Standard # dom-textarea/input-setselectionrange-dev |
Browser compatibility
BCD tables only load in the browser