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 完全対応 ありEdge 部分対応 一部
補足
部分対応 一部
補足
補足 Not supported on select, checkbox, or radio inputs.
Firefox 完全対応 ありIE 部分対応 9
補足
部分対応 9
補足
補足 Only supports input of type text and password.
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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

関連情報