EditContext：updateText() 方法
EditContext 接口的 updateText() 方法会更新 EditContext 对象的内部文本内容。
当用户在关联元素中输入文本时，不需要使用此方法。EditContext 对象将自动更新其内部文本内容，并根据需要触发 textupdate 事件。
但是，当用户以其他方式与文本内容进行交互时，可以使用此方法，例如从剪贴板粘贴文本时。
语法
js
updateText(rangeStart, rangeEnd, text)
参数
rangeStart-
一个数字，表示要替换的文本范围的起始位置。
rangeEnd-
一个数字，表示要替换的文本范围的结束位置。
文本-
一个字符串，表示新的文本内容。
返回值
无 (undefined)。
异常
TypeError-
如果调用此方法时提供的参数少于三个，则会抛出此异常。
示例
在用户粘贴文本时更新编辑器
此示例展示了如何在用户按下 Ctrl/Cmd + V 快捷键粘贴文本时，使用 updateText 方法更新 <canvas> 元素的 EditContext 中的文本内容。
该示例还使用了 Clipboard.readText() 方法从剪贴板读取文本。
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() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(editContext.text, 0, 40);
}
editContext.addEventListener("textupdate", (e) => {
render();
});
canvas.addEventListener("keydown", async (e) => {
if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
const pastedText = await navigator.clipboard.readText();
console.log(
`The user pasted the text: ${pastedText}. Updating the EditContext text.`,
);
editContext.updateText(
editContext.selectionStart,
editContext.selectionEnd,
pastedText,
);
editContext.updateSelection(
editContext.selectionStart + pastedText.length,
editContext.selectionStart + pastedText.length,
);
render();
}
});
规范
| 规范 |
|---|
| EditContext API # dom-editcontext-updatetext |
浏览器兼容性
加载中…
另见
- 它所属的
EditContext接口。