EditContext：textformatupdate 事件

可用性有限

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

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

当使用输入法编辑器 (IME) 窗口进行合成时，EditContext 接口的 textformatupdate 事件会被触发。

当 IME 决定正在合成的文本的某些部分应以不同的格式显示以指示合成状态时，就会触发此事件。

以下屏幕截图显示了在 Windows 上使用日语 IME 在 Nodepad 应用程序中编写文本的示例。文本使用粗下划线进行格式化，以指示它是从 IME 的某个建议中合成的。

Nodepad on Windows with some Japanese text being composed from the IME window

作为 Web 开发人员，您应该监听 textformatupdate 事件，并相应地更新在可编辑区域中显示的文本格式。

语法

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

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

ontextformatupdate = (event) => {};

事件类型

一个 TextFormatUpdateEvent。继承自 Event。

事件属性

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

TextFormatUpdateEvent.getTextFormats: 返回 IME 窗口想要应用于文本的文本格式列表。

示例

渲染 IME 合成文本格式

在以下示例中，textformatupdate 事件用于更新可编辑区域中文本的格式。请注意，此示例中的事件侦听器回调仅在使用 IME 窗口或其他特定于平台的编辑 UI 表面合成文本时才会被调用。

html

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

const TEXT_X = 10;
const TEXT_Y = 10;

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

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

editContext.addEventListener("textformatupdate", (e) => {
  // Clear the canvas.
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the text.
  ctx.fillText(editContext.text, TEXT_X, TEXT_Y);

  // Get the text formats that the IME window wants to apply.
  const formats = e.getTextFormats();

  // Iterate over the text formats
  for (const format of formats) {
    const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;

    const underlineXStart = ctx.measureText(
      editContext.text.substring(0, rangeStart),
    ).width;
    const underlineXEnd = ctx.measureText(
      editContext.text.substring(0, rangeEnd),
    ).width;
    const underlineY = TEXT_Y + 3;

    // For brevity, this example only draws a simple underline.
    // You should use the underlineStyle and underlineThickness values to draw the underline.

    ctx.beginPath();
    ctx.moveTo(TEXT_X + underlineXStart, underlineY);
    ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
    ctx.stroke();
  }
});

规范

规范
EditContext API # dom-editcontext-ontextformatupdate

浏览器兼容性

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