blob: 8beee8bc70749a6c0f1f027e6ed49d90b2facc30 (
plain)
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
|
---
title: HTMLInputElement.setRangeText()
slug: Web/API/HTMLInputElement/setRangeText
tags:
- API
- HTML DOM
- HTMLInputElement
- メソッド
- NeedsCompatTable
- リファレンス
- テキスト欄選択 API
browser-compat: api.HTMLInputElement.setRangeText
translation_of: Web/API/HTMLInputElement/setRangeText
---
{{APIRef("HTML DOM")}}
**`HTMLInputElement.setRangeText()`** メソッドは、 {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素の中のテキストの範囲を新しい文字列に置き換えます。
## 構文
```js
element.setRangeText(replacement);
element.setRangeText(replacement, start, end [, selectMode]);
```
### 引数
- `replacement`
- : 挿入する文字列。
- `start` {{optional_inline}}
- : 置換する最初の文字を 0 から始まる位置で指定します。既定値は現在の `selectionStart` の値（ユーザーが現在選択している先頭）です。
- `end` {{optional_inline}}
- : 置換する最後の文字の*次の*文字を 0 から始まる位置で指定します。既定値は現在の `selectionEnd` の値（ユーザーが現在選択している末尾）です。
- `selectMode` {{optional_inline}}
- : テキストが置換された後で、選択範囲がどのように設定されるかを定義する文字列です。
次の値が利用できます。
- `"select"`: 新規挿入したテキストを選択します。
- `"start"`: 挿入したテキストの直前に選択範囲を移動します。
- `"end"`: 挿入したテキストの直後に選択範囲を移動します。
- `"preserve"`: 選択範囲を保全しようとします。これが既定値です。
## 例
この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調（選択）されます。
### HTML
```html
<input type="text" id="text-box" size="30" value="このテキストは更新されていません。">
<button onclick="selectText()">テキストを更新</button>
```
### JavaScript
```js
function selectText() {
const input = document.getElementById('text-box');
input.focus();
input.setRangeText('ました', 11, 16, 'select');
}
```
### 結果
{{EmbedLiveSample("Example")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{HTMLElement("input")}}
- {{HTMLElement("textarea")}}
- {{domxref("HTMLInputElement")}}
- {{domxref("Selection")}}
|
