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

Value

A non-negative number, representing the zero-based index of the character immediately following the last selected character in a text <input>. 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. Setting selectionEnd to a new value fires the selectionchange and select events.

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.

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.

Examples

Basic usage

This example reports the selected text and its start and end positions. Select some text in the input, and then click the button.

HTML

<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}).`;
});

Result

Specifications

Browser compatibility

See also

• <input>
• HTMLInputElement
• HTMLInputElement.selectionStart
• HTMLInputElement.selectionDirection
• selectionchange event
• HTMLInputElement.select()
• HTMLInputElement.setSelectionRange()
• HTMLInputElement.setRangeText()
• HTMLTextAreaElement.selectionEnd
• Selection
• ::selection pseudo-element