DOM

：

：

Element：compositionend イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

IME などのテキスト変換システムが現在の編集セッションを完了またはキャンセルした時に発生します。

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

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

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

HTML： 

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

JavaScript： 

function Job1(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]：compositionstart
	//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="#efe"; //表現。
  IdDisp.innerHTML=eve.data;      //記録。
}
function Job2(eve){ //FEP で入力が終わった時のイベント処理：
  DA=eve;＝[object]：[object CompositionEvent]
	//isTrusted＝[boolean]：false
	//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]：compositionend
	//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="#fee"; //表現。
  IdDisp.innerHTML=eve.data;      //記録。
}
IdTest.addEventListener('compositionstart', Job1);
IdTest.addEventListener('compositionend', Job2);
テスト