EditContext：characterboundsupdate 事件

可用性有限

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

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

当操作系统需要知道 EditContext 对象的可编辑文本区域内某些字符的边界时，就会触发 characterboundsupdate 事件。

当操作系统需要显示特定于平台的与编辑相关的 UI 表面（例如输入法编辑器 (IME) 窗口）时，就会发生这种情况。

当 characterboundsupdate 事件触发时，您应该计算文本的字符边界，然后调用 EditContext.updateCharacterBounds() 方法向操作系统提供它所需的信息。

有关何时以及如何使用 characterboundsupdate 事件的更多信息，请参阅 updateCharacterBounds 方法的文档。

语法

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

addEventListener("characterboundsupdate", (event) => {});

oncharacterboundsupdate = (event) => {};

事件类型

一个 CharacterBoundsUpdateEvent。继承自 Event。

事件属性

除了下面列出的属性外，父接口 Event 的属性也可用。

CharacterBoundsUpdateEvent.rangeStart 只读: 操作系统需要边界的可编辑区域文本中第一个字符的偏移量。
CharacterBoundsUpdateEvent.rangeEnd 只读: 操作系统需要边界的可编辑区域文本中最后一个字符的偏移量。

示例

在需要时更新字符边界

此示例演示了如何使用 updateCharacterBounds 方法在 canvas 元素的 EditContext 中更新字符边界，当操作系统指示它需要该信息时。请注意，仅当使用 IME 窗口或其他特定于平台的编辑 UI 表面来组合文本时，才会调用事件侦听器回调。

html

<canvas id="editor-canvas"></canvas>

const FONT_SIZE = 40;
const FONT = `${FONT_SIZE}px Arial`;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = FONT;

const editContext = new EditContext();
canvas.editContext = editContext;

function computeCharacterBound(offset) {
  // Measure the width from the start of the text to the character.
  const widthBeforeChar = ctx.measureText(
    editContext.text.substring(0, offset),
  ).width;

  // Measure the character width.
  const charWidth = ctx.measureText(editContext.text[offset]).width;

  const charX = canvas.offsetLeft + widthBeforeChar;
  const charY = canvas.offsetTop;

  // Return a DOMRect representing the character bounds.
  return DOMRect.fromRect({
    x: charX,
    y: charY - FONT_SIZE,
    width: charWidth,
    height: FONT_SIZE,
  });
}

editContext.addEventListener("characterboundsupdate", (e) => {
  const charBounds = [];
  for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
    charBounds.push(computeCharacterBound(offset));
  }

  console.log("The required character bounds are", charBounds);
  editContext.updateCharacterBounds(e.rangeStart, charBounds);
});

规范

规范
EditContext API # dom-editcontext-oncharacterboundsupdate

浏览器兼容性

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