DOM

：

：

Element：compositionupdate イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。

バブリング あり
キャンセル 可能
インターフェイス CompositionEvent
イベント ハンドラー プロパティ なし
例
mdnより
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener('compositionupdate', (event) => {
  console.log(`generated characters were: ${event.data}`);
});

HTML： 

<TEXTAREA id=IdTest>ここに入力編集してみてください。</TEXTAREA>
<DIV id=IdDisp></DIV>

JavaScript： 

function Job1(eve){ //FEPにより入力開始のイベントの処理：
  let E=eve.target;               //イベントが起きた要素を取得。
  E.style.backgroundColor="#efe"; //表現。
  IdDisp.innerHTML="";      //記録消去。
}
function Job2(eve){ //FEP で入力が終わった時のイベント処理：
  let E=eve.target;               //イベントが起きた要素を取得。
  E.style.backgroundColor="#fee"; //表現。
}
function Job3(eve){ //FEP で入力変更があった時のイベント処理：
  D=eve; //＝[object]：[object CompositionEvent]
	//isTrusted＝[boolean]：true
	//data＝[string]：あ
	//initCompositionEvent＝[function]：function initCompositionEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：compositionupdate
	//target＝[object]：[object HTMLTextAreaElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…
  let E=eve.target;               //イベントが起きた要素を取得。
  E.style.backgroundColor="#ffe"; //表現。
  IdDisp.innerHTML=eve.data;      //記録。
}
IdTest.addEventListener('compositionstart', Job1);
IdTest.addEventListener('compositionend', Job2);
IdTest.addEventListener('compositionupdate', Job3);

ATOK でもOKでした。

テスト