HTMLInputElement: selectionEnd property

Baseline

Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

See full compatibility
Learn more

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

The selectionEnd property is a number representing the zero-based index of the character immediately following the last selected character in a text <input>. The property can be used to retrieve or set the end position.

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

Setting selectionEnd to a value less than the current value of selectionStart 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 selectionEnd 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 selectionEnd 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}).`;
});