HTMLInputElement: setSelectionRange() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The setSelectionRange() method of the HTMLInputElement interface sets the start and end positions of the current text selection in an <input> element. This updates the selection state immediately, though the visual highlight only appears when the element is focused.
This method updates the HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd, and HTMLInputElement.selectionDirection properties in one call. If you wish to select all text of an input element, you can use the select() method instead.
The selection of an input element can either be a range of characters or a caret (if nothing is selected). Therefore, by setting selectionStart and selectionEnd to the same value, you can effectively move the caret to a specific position in the text field.
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. See the
selectionStartproperty. 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
selectionEndis less thanselectionStart, then both are treated as the value ofselectionEnd. See theselectionEndproperty. selectionDirectionOptional-
A string indicating the direction in which the selection is considered to have been performed. See the
selectionDirectionproperty. Possible values:"forward""backward""none"if the direction is unknown or irrelevant. Default value.
Return value
None (undefined).
Exceptions
Examples
Selecting text
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>Select text</button>
JavaScript
function selectText() {
const input = document.getElementById("text-box");
input.focus();
input.setSelectionRange(2, 5);
}
document.querySelector("button").addEventListener("click", selectText);
Result
Moving the caret
Passing the same value for selectionStart and selectionEnd moves the caret without selecting any text. Choose a position and click the button to move the caret there. Position 0 is before the first character, and position 7 is after the last one.
HTML
<input type="text" id="caret-box" size="20" value="Mozilla" />
<label>
Position
<input type="number" id="caret-position" min="0" max="7" value="2" />
</label>
<button>Move caret</button>
JavaScript
const input = document.getElementById("caret-box");
const position = document.getElementById("caret-position");
document.querySelector("button").addEventListener("click", () => {
const index = position.valueAsNumber;
input.focus();
input.setSelectionRange(index, index);
});
Result
Specifications
| Specification |
|---|
| HTML # dom-textarea/input-setselectionrange-dev |