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.
The setSelectionRange()
method of the HTMLTextAreaElement
interface sets the start and end positions of the current text selection, and optionally the direction, in an <textarea>
element. 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, the select
and selectchange
events are fired.
This method also updates the HTMLTextAreaElement.selectionStart
, HTMLTextAreaElement.selectionEnd
, and HTMLTextAreaElement.selectionDirection
properties.
Note: The <textarea>
must be focused to enable selecting a subsection of the text to be selected using the setSelectionRange()
method. Setting focus also fires a selectchange
event.
To select all of the text of an <textarea>
element, use the HTMLTextAreaElement.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 the
selectionStart
property for more information. selectionEnd
-
The 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
. See theselectionEnd
property for more information. selectionDirection
Optional-
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 long
if (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();
}
Specifications
Specification |
---|
HTML Standard # dom-textarea/input-setselectionrange-dev |
Browser compatibility
BCD tables only load in the browser