TextUpdateEvent
TextUpdateEvent 接口是一个 DOM 事件，它表示附加到 EditContext 实例的可编辑文本区域中的文本或选区更新。
此接口继承自 Event 接口的属性。
构造函数
TextUpdateEvent()实验性-
创建一个新的
TextUpdateEvent对象。
实例属性
TextUpdateEvent.updateRangeStart只读 实验性-
返回被更新文本范围内的第一个字符的索引。
TextUpdateEvent.updateRangeEnd只读 实验性-
返回被更新文本范围内的最后一个字符的索引。
TextUpdateEvent.text只读 实验性-
返回在更新范围内插入的文本。
TextUpdateEvent.selectionStart只读 实验性-
返回更新后新选区范围内的第一个字符的索引。
TextUpdateEvent.selectionEnd只读 实验性-
返回更新后新选区范围内的最后一个字符的索引。
示例
渲染更新后的文本到可编辑画布中
在以下示例中，EditContext API 用于在 <canvas> 元素中渲染可编辑文本，并且在用户输入时使用 textupdate 事件来渲染文本。
html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;
function render() {
// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Render the text.
ctx.fillText(editContext.text, 10, 10);
}
editContext.addEventListener("textupdate", (e) => {
// Re-render the editor view when the user is entering text.
render();
console.log(
`The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
);
});
规范
| 规范 |
|---|
| EditContext API # dom-textupdateevent |
浏览器兼容性
加载中…