DOM

：

：

HTMLElement：beforeinput イベント

　編集：2022.10.02 by T.A.

[Edge]。→、

要素の内容が変更されようとしているときに発生します。対応しているのは <input>、<select>、<textarea> 要素、contenteditable が有効になっている要素、designMode がオンになっている要素です。

これにより、ブラウザーが DOM ツリーを変更する前に、ウェブ アプリケーションがテキスト編集の動作を上書きすることができ、入力イベントをより詳細に制御してパフォーマンスを向上させることができます。

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

バブリング あり
キャンセル 可能
インターフェイス InputEvent
イベント ハンドラー プロパティ なし
同期／非同期 同期
Composed はい
既定のアクション DOM 要素の更新
例
機能の検出／mdn

以下の関数は、beforeinput に対応していれば true を返します。 

function isBeforeInputEventAvailable() {
  return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function";
}
単純なロガー／mdn

この例では、<input> 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録します。

HTML： 

<input placeholder="テキストを入力" name="name"/>
<p id="values"></p>

JavaScript： 

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('beforeinput', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

HTML： 

<DIV id=IdTest contenteditable>DIV要素。ここで編集してみて…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //beforeinputイベントの処理：
  D=eve; //＝[object]：[object InputEvent]

詳細	//isTrusted＝[boolean]：true
	//data＝[string]：あ
	//isComposing＝[boolean]：false
	//inputType＝[string]：insertText
	//dataTransfer＝[object]：null
	//getTargetRanges＝[function]：function getTargetRanges() { [native code] }
	//view＝[object]：null
	//detail＝[number]：0
	//sourceCapabilities＝[object]：null
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：beforeinput
	//target＝[object]：[object HTMLDivElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…


  IdLog.innerHTML=eve.data; //データ取得。
}
IdTest.addEventListener('beforeinput', Job); //beforeinputイベントの割り当て。

FEP で確定前の文字列が取得できた。確定入力では入力した1文字ずつ取得できた。

テスト