HTMLTextAreaElement: setRangeText() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

setRangeText() 方法是 HTMLTextAreaElement 介面的一個方法，用於將引數傳遞的新文字替換 <textarea> 元素中的一段文字。

其他可選引數包括要更改文字的起始位置、結束位置以及一個定義更新文字後 <textarea> 中哪個部分應被選中的關鍵字。如果未提供 startSelection 和 endSelection 引數，則假定該範圍為當前選中的文字。

最後一個引數決定了在文字替換後如何設定選區。可能的值有："select"，選擇新插入的文字；"start"，將選區移動到插入文字之前；"end"，將選區移動到插入文字之後；或者預設值 "preserve"，嘗試保留原有選區。

此外，還會觸發 select 和 selectionchange 事件。

語法

setRangeText(replacement)
setRangeText(replacement, startSelection)
setRangeText(replacement, startSelection, endSelection)
setRangeText(replacement, startSelection, endSelection, selectMode)

引數

replacement: 要插入的字串。
selectionStart 可選: 第一個選定字元的索引。大於元素值長度的索引將被視為指向值的末尾。
selectionEnd 可選: 最後一個選定字元之後的字元的索引。大於元素值長度的索引將被視為指向值的末尾。如果 selectionEnd 小於 selectionStart，則兩者都被視為 selectionEnd 的值。
selectMode 可選: 一個關鍵字，可以是 select、start、end，或者預設值 preserve，定義文字替換後選區應如何設定。

<label for="ta">Example text input:</label>
<textarea id="ta">
  This text has NOT been updated.
</textarea>
<button id="btn">Update text</button>

JavaScript

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  changeText();
});

function changeText() {
  const textarea = document.getElementById("ta");
  textarea.focus();
  textarea.setRangeText("ALREADY", 14, 17, "select");
}