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 |
瀏覽器相容性
載入中…