EditContext: textupdate 事件

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中无法正常工作。

实验性： 这是一种 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

EditContext 接口的 textupdate 事件在用户对附加到 EditContext 实例的可编辑区域的文本或选择进行更改时触发。

此事件可以根据用户输入在 UI 中呈现更新的文本和选择。

语法

在 addEventListener() 等方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("textupdate", (event) => {});

ontextupdate = (event) => {};

事件类型

一个 TextUpdateEvent。继承自 Event。

事件属性

除了下面列出的属性外，还可以使用父接口 Event 中的属性。

TextUpdateEvent.updateRangeStart 只读

返回更新的文本范围中第一个字符的索引。

TextUpdateEvent.updateRangeEnd 只读

返回更新的文本范围中最后一个字符的索引。

TextUpdateEvent.text 只读

返回插入到更新范围中的文本。

TextUpdateEvent.selectionStart 只读

返回更新后新选择范围中第一个字符的索引。

TextUpdateEvent.selectionEnd 只读

返回更新后新选择范围中最后一个字符的索引。

示例

在 textupdate 上呈现更新的文本

在以下示例中，EditContext API 的 textupdate 事件用于呈现用户在可编辑的 <canvas> 元素中输入的文本。

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;

editContext.addEventListener("textupdate", (e) => {
  // When the user has focus on the <canvas> and enters text,
  // this event is fired, and we use it to re-render the text.
  console.log(
    `The user entered the text: ${e.text} at ${e.updateRangeStart}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});

规范

规范
EditContext API
# dom-editcontext-ontextupdate

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。