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介面。