HTMLInputElement: setRangeText() method

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

TheHTMLInputElement.setRangeText() method replaces arange of text in an<input> or<textarea> element witha new string.

Syntax

setRangeText(replacement)setRangeText(replacement, start)setRangeText(replacement, start, end)setRangeText(replacement, start, end, selectMode)

Parameters

replacement

The string to insert.

startOptional

The 0-based index of the first character to replace. Defaults to the currentselectionStart value (the start of the user's current selection).

endOptional

The 0-based index of the characterafter the last character to replace.Defaults to the currentselectionEnd value (the end of the user's currentselection).

selectModeOptional

A string defining how the selection should be set after the text has been replaced.Possible values:

"select" selects the newly inserted text.
"start" moves the selection to just before the inserted text.
"end" moves the selection to just after the inserted text.
"preserve" attempts to preserve the selection. This is the default.

<input  type="text"   size="30"  value="This text has NOT been updated." /><button>Update text</button>

JavaScript

function selectText() {  const input = document.getElementById("text-box");  input.focus();  input.setRangeText("ALREADY", 14, 17, "select");}document.querySelector("button").addEventListener("click", selectText);