InputEvent：getTargetRanges() 方法
InputEvent 接口的 getTargetRanges() 方法返回一个 StaticRange 对象数组，如果不取消输入事件，该数组受到 DOM 更改的影响。
这允许 web 应用程序在浏览器修改 DOM 树之前重写文本编辑行为，并提供更多控制输入事件的能力，以提高性能。
依据 inputType 值和当前的编辑宿主，此方法的返回值不同：
| inputType | 编辑宿主 | getTargetRanges()的响应 |
|---|---|---|
"historyUndo" 或 "historyRedo" |
Any | 空数组 |
| 剩余的所有值 | contenteditable |
一个与事件有关的 StaticRange 对象数组。
|
| 剩余的所有值 |
input
或者 textarea
|
一个空数组 |
语法
js
getTargetRanges()
参数
无。
返回值
一个 StaticRange 对象数组。
示例
特征检测
如果浏览器支持 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);
});
规范
| 规范 |
|---|
| Input Events Level 2 # dom-inputevent-gettargetranges |