InputEvent：getTargetRanges() 方法

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.

InputEvent 接口的 getTargetRanges() 方法返回一个 StaticRange 对象数组，如果不取消输入事件，该数组受到 DOM 更改的影响。

这允许 web 应用程序在浏览器修改 DOM 树之前重写文本编辑行为，并提供更多控制输入事件的能力，以提高性能。

依据 inputType 值和当前的编辑宿主，此方法的返回值不同：

inputType	编辑宿主	`getTargetRanges()`的响应
`"historyUndo"` 或 `"historyRedo"`	Any	空数组
剩余的所有值	`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);
});

规范

Specification
Input Events Level 2 # dom-inputevent-gettargetranges

浏览器兼容性

BCD tables only load in the browser