HTMLElement: beforeinput イベント

DOM の beforeinput イベントは、<input><select><textarea> 要素の値が変更されようとしているときに発生します。 このイベントは、contenteditable が有効になっている要素、および designMode がオンになっている要素にも適用されます。

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

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

機能の検出

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

function isBeforeInputEventAvailable() {
  return typeof InputEvent.prototype.getTargetRanges === "function";
}

単純なロガー

この例では、 <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;
}

結果

仕様書

仕様書 状態
UI Events
beforeinput event の定義
草案

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 関連イベント: input