TextFormat
TextFormat 接口表示应应用于附加到 EditContext 实例的可编辑文本区域中的一段文本的特定格式。文本格式由用户正在使用其撰写文本的 输入法编辑器 (IME) 窗口请求。
当使用 Web 的默认可编辑区域之一（例如 <textarea> 元素）时，浏览器和操作系统会为您处理 IME 撰写。例如，在 Windows 中使用文本区域中的日语 IME 时，可以应用以下文本格式
- 当使用键盘撰写文本时，键入的字符下方会有细的波浪下划线：
- 当用户从 IME 窗口中的候选项列表中选择建议时，文本将被替换，并用粗实线下划线：
当使用 EditContext API 创建自己的自定义可编辑区域时，您需要自己处理 IME 撰写。您应该监听 textformatupdate 事件，该事件会为您提供 IME 窗口希望应用于正在撰写的文本的文本格式列表。然后，您应该相应地更新在可编辑区域中显示的文本的格式。
构造函数
TextFormat()实验性-
返回一个新的
TextFormat实例。
实例属性
TextFormat.rangeStart只读 实验性-
需要使用给定文本格式设置格式的文本范围的起始位置。
TextFormat.rangeEnd只读 实验性-
需要使用给定文本格式设置格式的文本范围的结束位置。
TextFormat.underlineStyle只读 实验性-
需要应用于正在设置格式的文本范围的下划线的样式。
TextFormat.underlineThickness只读 实验性-
需要应用于正在设置格式的文本范围的下划线的粗细。
示例
使用 textformatupdate 事件
在以下示例中，textformatupdate 事件用于记录 IME 撰写窗口希望应用于可编辑元素中文本范围的各种格式。请注意，此示例中的事件侦听器回调仅在使用 IME 窗口撰写文本时才会被调用。
html
<div id="editor" style="height:200px;background:#eee;"></div>
js
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}.`,
);
}
});
规范
| 规范 |
|---|
| EditContext API # dom-textformat |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。