HTMLInputElement.setSelectionRange()

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 Standard
The definition of 'HTMLInputElement.setSelectionRange()' in that specification.
Living Standard No change
HTML 5.1
The definition of 'HTMLInputElement.setSelectionRange()' in that specification.
Recommendation No change
HTML5
The definition of 'HTMLInputElement.setSelectionRange()' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
setSelectionRangeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 8Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

See also