HTMLInputElement: setRangeText() メソッド
        
        
          
                Baseline
                
                  Widely available
                
                
              
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
HTMLInputElement.setRangeText() メソッドは、 <input> や <textarea> 要素の中のテキストの範囲を新しい文字列に置き換えます。
構文
js
setRangeText(replacement)
setRangeText(replacement, start)
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, selectMode)
引数
- replacement
- 
挿入する文字列。 
- start省略可
- 
置換する最初の文字を 0 から始まる位置で指定します。既定値は現在の selectionStartの値(ユーザーが現在選択している先頭)です。
- end省略可
- 
置換する最後の文字の次の文字を 0 から始まる位置で指定します。既定値は現在の selectionEndの値(ユーザーが現在選択している末尾)です。
- selectMode省略可
- 
テキストが置換された後で、選択範囲がどのように設定されるかを定義する文字列です。 次の値が利用できます。 - "select": 新規挿入したテキストを選択します。
- "start": 挿入したテキストの直前に選択範囲を移動します。
- "end": 挿入したテキストの直後に選択範囲を移動します。
- "preserve": 選択範囲を保全しようとします。これが既定値です。
 
返値
なし (undefined)。
例
この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調(選択)されます。
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");
}
結果
仕様書
| Specification | 
|---|
| HTML> # dom-textarea/input-setrangetext-dev> | 
ブラウザーの互換性
Loading…