The HTMLInputElement.setRangeText()
method replaces a range of text in an <input>
or <textarea>
element with a new string.
Syntax
element.setRangeText(replacement); element.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.
Example
Click the button in this example to replace part of the text in the text box. The newly inserted text will be highlighted (selected) afterwards.
HTML
<input type="text" id="text-box" size="30" value="This text has NOT been updated."> <button onclick="selectText()">Update text</button>
JavaScript
function selectText() { const input = document.getElementById('text-box'); input.focus(); input.setRangeText('ALREADY', 14, 17, 'select'); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLInputElement.setSelectionRange()' in that specification. |
Living Standard | No change |
HTML5 The definition of 'HTMLInputElement.setSelectionRange()' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setRangeText | Chrome Full support 24 | Edge No support No | Firefox Full support 27 | IE No support No | Opera Full support Yes | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support 25 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support