InputEvent: getTargetRanges() 方法
getTargetRanges()InputEvent 接口的一部分，它返回一个 StaticRange 对象数组，这些对象将在 DOM 发生更改时受到影响（如果输入事件未被取消）。
这允许 Web 应用在浏览器修改 DOM 树之前覆盖文本编辑行为，并提供对输入事件的更多控制以提高性能。
根据 inputType 的值和当前的编辑主机，该方法的预期返回值会有所不同。
| inputType | 编辑主机 | getTargetRanges() 的响应 |
|---|---|---|
"historyUndo" 或 "historyRedo" |
任意 | 空数组 |
| 所有剩余的 | 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 |
浏览器兼容性
加载中…