HTMLInputElement: selectionStart property

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.

Learn more
See full compatibility

The selectionStart property of the HTMLInputElement interface specifies the start position of the current text selection in an <input> element.

Description

The selectionStart property is a number representing the zero-based index of the first selected character in a text <input>. The property can be used to retrieve or set the start position.

When nothing is selected, the value of both selectionStart and selectionEnd is the position of the cursor (caret) inside the <input> element.

Setting selectionStart to a value greater than the current value of selectionEnd updates both properties to the new value. Values greater than the length of the input's value are treated as the end of the value.

The selectionStart property applies only to inputs of types text, search, url, tel, and password. On other input types, reading the property returns null, and setting it throws an InvalidStateError DOMException.

The property value can be retrieved and set without the <input> having focus, but the element must have focus for the ::selection pseudo-element to match the selected text.

Setting selectionStart to a new value fires the selectionchange and select events.

<label for="text-box">Select some text:</label>
<input id="text-box" type="text" value="The quick brown fox." />
<button id="show-selection" type="button">Show selection</button>
<p id="output">No selection reported yet.</p>

JavaScript

const textBox = document.querySelector("#text-box");
const output = document.querySelector("#output");

document.querySelector("#show-selection").addEventListener("click", () => {
  const start = textBox.selectionStart;
  const end = textBox.selectionEnd;
  const selectedText = textBox.value.substring(start, end);

  output.textContent = `You selected "${selectedText}" (start: ${start}, end: ${end}).`;
});