Element: input イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

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

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("input", (event) => {});

oninput = (event) => {};

イベント型

InputEvent です。UIEvent を継承しています。

Event UIEvent InputEvent

イベントプロパティ

このインターフェイスは、親である UIEventEvent のプロパティを継承しています。

InputEvent.data 読取専用

文字列で、挿入された文字を返します。変更により挿入されたテキストがない(例えば文字を削除した)場合は、空文字列になることがあります。

InputEvent.dataTransfer 読取専用

編集可能なコンテンツに追加されたリッチテキストまたはプレーンテキストデータ、あるいは削除されたプレーンテキストデータに関する情報を保持する DataTransfer オブジェクトを返します。

InputEvent.inputType 読取専用

テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を返します。

InputEvent.isComposing 読取専用

論理値で、イベントが compositionstart の後かつ compositionend の前に発生したかを示す値を返します。

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

HTML

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

JavaScript

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

input.addEventListener("input", updateValue);

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

結果

仕様書

Specification
UI Events
# event-type-input
HTML
# handler-oninput

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
input event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報