HTMLInputElement: setRangeText() method

Baseline Widely available

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

The HTMLInputElement.setRangeText() method replaces a range of text in an <input> or <textarea> element with a new string.

Syntax

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

Parameters

replacement

The string to insert.

start Optional

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

end Optional

The 0-based index of the character after the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).

selectMode Optional

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.

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

JavaScript

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

document.querySelector("button").addEventListener("click", selectText);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Jun 23, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: setRangeText() method

In this article

Syntax

Parameters

Return value

Examples

HTML

JavaScript

Result

Specifications

Browser compatibility

See also

Help improve MDN