InputEvent: phương thức getTargetRanges()

Baseline Widely available

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

Phương thức getTargetRanges() của giao diện InputEvent trả về một mảng các đối tượng StaticRange sẽ bị ảnh hưởng bởi một thay đổi đối với DOM nếu sự kiện đầu vào không bị hủy.

Điều này cho phép các ứng dụng web ghi đè hành vi chỉnh sửa văn bản trước khi trình duyệt sửa đổi cây DOM, và cung cấp khả năng kiểm soát nhiều hơn đối với các sự kiện đầu vào để cải thiện hiệu suất.

Tùy thuộc vào giá trị của inputType và máy chủ chỉnh sửa hiện tại, giá trị trả về dự kiến của phương thức này thay đổi:

inputType	Máy chủ chỉnh sửa	Phản hồi của `getTargetRanges()`
`"historyUndo"` hoặc `"historyRedo"`	Bất kỳ	Mảng rỗng
Tất cả các loại còn lại	`contenteditable`	một mảng các đối tượng `StaticRange` được liên kết với sự kiện
Tất cả các loại còn lại	`input` hoặc `textarea`	một mảng rỗng

Cú pháp

getTargetRanges()

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

Sử dụng cơ bản

Ví dụ sau chọn một phần tử contenteditable và sử dụng sự kiện beforeinput để ghi nhật ký kết quả của getTargetRanges().

const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});