このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
TextFormatUpdateEvent
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
TextFormatUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能な領域内で変換中のテキストにインプットメソッドエディター (IME) ウィンドウが適用したい書式のリストを表します。
このインターフェイスは Event からプロパティを継承しています。
コンストラクター
TextFormatUpdateEvent()-
新しい
TextFormatUpdateEventオブジェクトを生成します。
インスタンスメソッド
TextFormatUpdateEvent.getTextFormats-
IME ウィンドウがテキストに適用したい書式を表す
TextFormatオブジェクトのArrayを返します。
例
IME で変換中のテキストに書式を設定する
以下の例では、textformatupdate イベントを用いて編集可能な領域内のテキストの書式を更新しています。
html
<canvas id="editor-canvas"></canvas>
js
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) => {
// キャンバスを初期化します。
ctx.clearRect(0, 0, canvas.width, canvas.height);
// テキストを描画します。
ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
console.log(`Rendering text: ${editContext.text}`);
// IME ウィンドウが適用したい書式を取得します。
const formats = e.getTextFormats();
// 取得した書式を走査します。
for (const format of formats) {
const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
console.log(
`Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
);
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;
// 簡単のため、この例ではシンプルな下線のみを引きます。
// 正しい下線を引くには、underlineStyle と underlineThickness を使用してください。
ctx.beginPath();
ctx.moveTo(TEXT_X + underlineXStart, underlineY);
ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
ctx.stroke();
}
});
仕様書
| 仕様書 |
|---|
| EditContext API # dom-textformatupdateevent |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。