TextFormat

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

TextFormat 接口表示应应用于附加到 EditContext 实例的可编辑文本区域中一段文本的特定格式。文本格式由用户正在使用的输入法编辑器 (IME) 窗口请求。

在使用 Web 的默认可编辑区域之一（例如 <textarea> 元素）时，IME 合成会由浏览器和操作系统为您处理。例如，在 Windows 上使用日文 IME 在 textarea 中输入时，可以应用以下文本格式：

当使用键盘输入文本时，键入的字符下方会出现一条细波浪线。
当用户从候选词列表中选择一个建议时，文本将被替换，并带有粗实线下划线。

当使用 EditContext API 创建自己的自定义可编辑区域时，您需要自己处理 IME 合成。您应该监听 textformatupdate 事件，该事件会提供 IME 窗口想要应用于正在输入的文本的文本格式列表。然后，您应该相应地更新可编辑区域中显示的文本的格式。

构造函数

TextFormat() 实验性: 返回一个新的 TextFormat 实例。

实例属性

TextFormat.rangeStart 只读实验性: 需要用给定文本格式进行格式化的文本范围的起始位置。
TextFormat.rangeEnd 只读实验性: 需要用给定文本格式进行格式化的文本范围的结束位置。
TextFormat.underlineStyle 只读实验性: 需要应用于正在格式化的文本范围的下划线样式。
TextFormat.underlineThickness 只读实验性: 需要应用于正在格式化的文本范围的下划线粗细。

示例

使用 `textformatupdate` 事件

在下面的示例中，textformatupdate 事件用于记录 IME 合成窗口想要应用于可编辑元素中文本范围的各种格式。请注意，此示例中的事件监听器回调仅在用户使用 IME 窗口合成文本时调用。

html

<div id="editor"></div>

#editor {
  height: 200px;
  background: #eeeeee;
}

const editorEl = document.getElementById("editor");
const editContext = new EditContext(editorEl);
editorEl.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  // Get the TextFormat instances.
  const formats = e.getTextFormats();

  // Iterate over the TextFormat instances.
  for (const format of formats) {
    console.log(
      `Applying a ${format.underlineThickness} ${format.underlineStyle} underline between ${format.rangeStart} and ${format.rangeEnd}.`,
    );
  }
});