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

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

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

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

構文

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

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

oninput = (event) => {};

イベント型

一般的な Event です。

例

この例では、 <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

ブラウザーの互換性

BCD tables only load in the browser

関連情報