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");
}