HTMLElement: input イベント

input イベントは、 <input>, <select>, <textarea> の各要素の value が変更されたときに発生します。

バブリング あり
キャンセル 不可
インターフェイス InputEvent
イベントハンドラープロパティ GlobalEventHandlers.oninput

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

<input> 要素が type=checkbox または type=radio 型であった場合、 HTML5 仕様書によれば、 input イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに change イベントを使用するようにするかしてください。

注: input イベントは、要素の value の値が変化するたびに発生します。これは、 change イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。

この例では、 <input> 要素の値が変化するたびに値をログ出力します。

HTML

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

JavaScript

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

input.addEventListener('input', updateValue);

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

結果

仕様書

仕様書 状態
HTML Living Standard
input event の定義
現行の標準
Document Object Model (DOM) Level 3 Events Specification
input event の定義
廃止された

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
input eventChrome 完全対応 1Edge 完全対応 79
完全対応 79
未対応 12 — 79
補足
補足 Not supported on select, checkbox, or radio inputs.
Firefox 完全対応 6IE 部分対応 9
補足
部分対応 9
補足
補足 Only supports input of type text and password.
Opera 完全対応 11.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 12Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
部分対応  
部分対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報