Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
92 lines (69 loc) · 2.24 KB
/
Copy pathindex.md
File metadata and controls
92 lines (69 loc) · 2.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
---
title: "HTMLInputElement: setRangeText() method"
short-title: setRangeText()
slug: Web/API/HTMLInputElement/setRangeText
page-type: web-api-instance-method
browser-compat: api.HTMLInputElement.setRangeText
---
{{APIRef("HTML DOM")}}
The **`HTMLInputElement.setRangeText()`** method replaces a
range of text in an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} element with
a new string.
## Syntax
```js-nolint
setRangeText(replacement)
setRangeText(replacement, start)
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, selectMode)
```
### Parameters
- `replacement`
- : The string to insert.
- `start` {{optional_inline}}
- : 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_inline}}
- : 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_inline}}
- : 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.
### Return value
None ({{jsxref("undefined")}}).
## Examples
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
```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);
```
### Result
{{EmbedLiveSample("Examples")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{HTMLElement("input")}}
- {{HTMLElement("textarea")}}
- {{domxref("HTMLInputElement")}}
- {{domxref("Selection")}}