InputEvent: getTargetRanges() 方法

getTargetRanges() 方法是 InputEvent 接口的方法，它返回一个包含 StaticRange 对象的数组，这些对象将在输入事件未被取消的情况下受到 DOM 更改的影响。

这允许 Web 应用程序在浏览器修改 DOM 树之前覆盖文本编辑行为，并提供对输入事件的更多控制，从而提高性能。

根据 inputType 的值和当前编辑宿主，此方法的预期返回值会有所不同

inputType	编辑宿主	`getTargetRanges()` 的响应
`"historyUndo"` 或 `"historyRedo"`	任何	空数组
所有剩余	`contenteditable`	与事件关联的 `StaticRange` 对象的数组
所有剩余	`input` 或 `textarea`	空数组

语法

getTargetRanges()

参数

无。

返回值

一个包含 StaticRange 对象的数组。

示例

功能检测

以下函数在 beforeinput（因此 getTargetRanges）受支持时返回 true。

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

基本用法

以下示例选择一个 contenteditable 元素并利用 beforeinput 事件来记录 getTargetRanges() 的结果。

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

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

规范

规范
输入事件级别 2 # dom-inputevent-gettargetranges

浏览器兼容性

BCD 表仅在浏览器中加载