HTMLTextAreaElement: 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⁩.

ThesetSelectionRange() method of theHTMLTextAreaElement interface sets the start and end positions of the current text selection, and optionally the direction, in a<textarea> element. This updates the selection state immediately, though the visual highlight only appears when the element is focused. The direction indicates the in which selection should be considered to have occurred; for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. In addition, theselect andselectionchange events are fired.

This method updates theHTMLTextAreaElement.selectionStart,HTMLTextAreaElement.selectionEnd, andHTMLTextAreaElement.selectionDirection properties immediately, regardless of focus state. The visual selection highlight requires the element to be focused.

Note:WhilesetSelectionRange() updates the selection properties immediately, the visual selection highlight only appears when the<textarea> is focused. Focusing the element will also fire aselectionchange event.

To selectall of the text of an<textarea> element, use theHTMLTextAreaElement.select() method.

Syntax

setSelectionRange(selectionStart, selectionEnd)setSelectionRange(selectionStart, selectionEnd, selectionDirection)

Parameters

selectionStart: The 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 theselectionStart property for more information.
selectionEnd: The index of the characterafter 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. IfselectionEnd is less thanselectionStart, then both are treated as the value ofselectionEnd. See theselectionEnd property for more information.
selectionDirectionOptional: The keyword"forward","backward", or the default"none" — indicating the direction in which the selection is considered to have been performed. See theselectionDirection property for more information.

Return value

None (undefined).

Examples

const textarea = document.getElementById("text-box");const chars = textarea.textLength;// if the value is more than 10 characters longif (chars > 10) {  // Element must be focused to select a range of text within it  textarea.focus();  // select the text between the fifth character from the start and  // the fifth character from the end  textarea.setSelectionRange(5, chars - 5);} else {  // otherwise select all the text  textarea.select();}