HTMLInputElement: selectionStart property

The selectionStart property of the HTMLInputElement interface is a number that represents the beginning index of the selected text. When nothing is selected, it returns the position of the text input cursor (caret) inside of the <input> element.

Note: According to the WHATWG forms spec, the selectionStart property applies only to inputs of types text, search, URL, tel, and password. On other input types, reading selectionStart returns null, and setting it throws an InvalidStateError.

If selectionStart is greater than selectionEnd, then both are treated as the value of selectionEnd.

Value

A non-negative number.

Examples

undefined

HTML

html

<!-- use selectionStart on non text input element -->
<label for="color">selectionStart property on type=color</label>
<input id="color" type="color" />

<!-- use selectionStart on text input element -->
<fieldset>
  <legend>selectionStart property on type=text</legend>
  <label for="statement">Select 'mdn' word from the text : </label>
  <input
    type="text"
    id="statement"
    value="The mdn is a documentation repository." />
  <button id="statement-btn">Select mdn text</button>
</fieldset>

JavaScript

const inputElement = document.getElementById("statement");
const statementBtn = document.getElementById("statement-btn");
const colorStart = document.getElementById("color");

statementBtn.addEventListener("click", () => {
  inputElement.selectionStart = 4;
  inputElement.selectionEnd = 7;
  inputElement.focus();
});

// open browser console to verify output
console.log(colorStart.selectionStart); // Output : null

Result

Specifications

HTML