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

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

Note:According to theWHATWG forms specselectionStart property applies only to inputs of types text, search, URL, tel, and password. In modern browsers, throws an exception while settingselectionStart property on the rest of input types. Additionally, this property returnsnull while accessingselectionStart property on non-text input elements.

IfselectionStart is greater thanselectionEnd, then both aretreated as the value ofselectionEnd.

<!-- use selectionStart on non text input element --><label for="color">selectionStart property on type=color</label><input 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"       value="The mdn is a documentation repository." />  <button>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 outputconsole.log(colorStart.selectionStart); // Output : null