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 2020年1月.
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 イベントは発行されないことに注意してください。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("input", (event) => {});
oninput = (event) => {};
イベント型
InputEvent です。UIEvent を継承しています。
イベントプロパティ
このインターフェイスは、親である UIEvent、Event のプロパティを継承しています。
InputEvent.data読取専用-
文字列で、挿入された文字を返します。変更により挿入されたテキストがない（例えば文字を削除した）場合は、空文字列になることがあります。
InputEvent.dataTransfer読取専用-
編集可能なコンテンツに追加されたリッチテキストまたはプレーンテキストデータ、あるいは削除されたプレーンテキストデータに関する情報を保持する
DataTransferオブジェクトを返します。 InputEvent.inputType読取専用-
テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を返します。
InputEvent.isComposing読取専用-
論理値で、イベントが
compositionstartの後かつcompositionendの前に発生したかを示す値を返します。
例
この例では、 <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;
}
結果
仕様書
| Specification |
|---|
| UI Events # event-type-input |
| HTML # handler-oninput |
ブラウザーの互換性
Loading…
関連情報
- 関連イベント: