HTMLInputElement: selectionStart property - Web APIs | MDN
Value
A non-negative number.
Examples
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
js
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
| Specification |
|---|
| HTML # dom-textarea/input-selectionstart |
Browser compatibility
See also
HTMLTextAreaElement.selectionStartpropertyHTMLInputElement.selectionEndpropertyHTMLInputElement.setSelectionRangemethod