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);
});
规范
Specification |
---|
Input Events Level 2 # dom-inputevent-gettargetranges |
浏览器兼容性
BCD tables only load in the browser