InputEvent：getTargetRanges() 方法

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

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

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

inputType 编辑宿主 getTargetRanges()的响应
"historyUndo" 或 "historyRedo" Any 空数组
剩余的所有值 contenteditable 一个与事件有关的 StaticRange (en-US) 对象数组。
剩余的所有值 input 或者 textarea 一个空数组

语法

js
getTargetRanges()

参数

无。

返回值

一个 StaticRange (en-US) 对象数组。

示例

特征检测

如果浏览器支持 beforeinput 和 getTargetRanges，则下面的函数会返回 true。

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

基本用法

下面的示例选择一个 contenteditable 元素，利用 beforeinput 事件输出 getTargetRanges() 的结果。

js
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