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>

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

浏览器兼容性

BCD 表仅在浏览器中加载