InputEvent：getTargetRanges() 方法

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-cn/web/api/ui_events/index.md)

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