HTMLElement: beforeinput イベント

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

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

この例では、<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 の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
beforeinput event
実験的
Chrome 完全対応 ありEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

  • 関連イベント: input