HTMLTextAreaElement: setRangeText() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Phương thức setRangeText() của giao diện HTMLTextAreaElement thay thế một phạm vi văn bản trong phần tử <textarea> bằng văn bản mới được truyền vào làm đối số.

Các tham số tùy chọn bổ sung bao gồm vị trí bắt đầu của đoạn văn bản cần thay đổi, vị trí kết thúc của đoạn, và một từ khóa xác định phần nào của <textarea> sẽ được chọn sau khi văn bản được cập nhật. Nếu các đối số startSelection và endSelection không được cung cấp, phạm vi sẽ được coi là vùng chọn hiện tại.

Đối số cuối cùng xác định cách vùng chọn sẽ được đặt sau khi văn bản được thay thế. Các giá trị có thể là "select", chọn đoạn văn bản mới được chèn; "start", chuyển vùng chọn đến ngay trước văn bản được chèn; "end", chuyển vùng chọn đến ngay sau văn bản được chèn; hoặc mặc định "preserve", cố gắng giữ nguyên vùng chọn.

Ngoài ra, các sự kiện select và selectionchange được kích hoạt.

Cú pháp

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

Tham số

replacement: Chuỗi cần chèn vào.
selectionStart Optional: Chỉ mục của ký tự được chọn đầu tiên. Chỉ mục lớn hơn độ dài của giá trị phần tử sẽ được coi là trỏ đến cuối giá trị.
selectionEnd Optional: Chỉ mục của ký tự sau ký tự được chọn cuối cùng. Chỉ mục lớn hơn độ dài của giá trị phần tử sẽ được coi là trỏ đến cuối giá trị. Nếu selectionEnd nhỏ hơn selectionStart, cả hai sẽ được coi là giá trị của selectionEnd.
selectMode Optional: Một từ khóa, là select, start, end, hoặc mặc định preserve, xác định cách vùng chọn sẽ được đặt sau khi văn bản được thay thế.

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