HTMLInputElement: setSelectionRange() method

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 according 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.

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

<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">Select text</button>

function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}