input
イベントは、 <input>
, <select>
, <textarea>
の各要素の value
が変更されたときに発生します。
バブリング | あり |
---|---|
キャンセル | 不可 |
インターフェイス | InputEvent |
イベントハンドラープロパティ | GlobalEventHandlers.oninput |
このイベントは、 contenteditable
を有効にした要素、 designMode
を有効にしたすべての要素にも適用されます。 contenteditable
や designMode
の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。
<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 の定義 |
廃止 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント