Widely available すべての主要ブラウザで対応済み。安心して使用可能。

input (event)

input イベントは、 <input>, <select>, <textarea> の各要素の値 (value) が、ユーザーのアクション（テキストボックスに入力したり、チェックボックスを調べるなど）を直接的な原因変更された際に発行されます。

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

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

<textarea> およびテキスト入力を受け入れる <input> 要素（type=text、type=tel、など）では、インターフェイスは InputEvent です。それ以外の場合は、インターフェイスは Event になります。

input イベントは、要素の value の値が変化するたびに発生します。これは、 change イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。 JavaScript でプログラムにより要素の value を変更した場合、input イベントは発行されないことに注意してください。

イベント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
input_event
1
79
6
3.1
18
2
beforeinput_event

DOM の beforeinput イベントは、input または textarea 要素の値が変更されようとしているときに発生します。 このイベントは、HTMLElement.contentEditable が有効になっている要素、および Document.designMode がオンになっている要素にも適用されます。
60
79
87
10.1
60
10.3
InputEvent

InputEvent インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。
60
79
31
10.1
60
10.3
data

data は InputEvent インターフェイスの読み取り専用プロパティで、挿入された文字を文字列で返します。挿入されるテキストがない変更の場合、例えば文字が削除された場合は、これは空文字列になることがあります。
60
79
67
10.1
60
10.3
dataTransfer

dataTransfer は InputEvent インターフェイスの読み取り専用プロパティで、 このプロパティは、編集可能なコンテンツに追加または削除されたリッチテキストまたはプレーンテキストデータに関する情報を含む DataTransfer オブジェクトを返します。
60
79
67
10.1
60
10.3
getTargetRanges

getTargetRanges() は InputEvent インターフェイスのメソッドで、入力イベントが取り消されない限り DOM の変更に影響される静的範囲を配列で返します。
60
79
87
10.1
60
10.3
InputEvent

InputEvent() コンストラクターは、新しい InputEvent オブジェクトを作成します。
60
79
31
10.1
60
10.3
inputType

inputType は InputEvent インターフェイスの読み取り専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。
60
79
66
10.1
60
10.3
inputType (insertFromPasteAsQuotation)
実験的

`insertFromPasteAsQuotation` 入力タイプ
67
isComposing

InputEvent.isComposing は読み取り専用プロパティで、このイベントが Element/compositionstartevent の後、かつ Element/compositionendevent の前に発生したかどうかを示す論理値を返します。
60
79
31
16.4
60
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • `select`、`checkbox`、または`radio`入力要素ではサポートされていません。

基本構文

JAVASCRIPT 
addEventListener("input", (event) => { })

oninput = (event) => { }

実務での使いどころ

  • input (event) の活用

    input イベントは、 <input>, <select>, <textarea> の各要素の値 (value) が、ユーザーのアクション（テキストボックスに入力したり、チェックボックスを調べるなど）を直接的な原因変更された際に発行されます。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク