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}.`,
    );
  }
});