この記事の要点

jQuery でフォーム要素の変更を検知する基本イベントは change / input / keyup / keypress の 4 種 change: テキストはフォーカスが外れた時、セレクト/ラジオは選択を変えた瞬間に発火 input: テキストボックスで1 文字入力するたびに発火 (modern Web の主流) keypress は非推奨。記号 / 全角 / IME 入力では発火しないことがあるため input / keyup を使う IME (日本語入力) 中はイベントが発火しないので、確定後のみ処理したい場合は compositionend を併用

jQuery フォームイベントの全体像

テキストボックス・セレクトボックス・ラジオボタン・チェックボックスなど、フォーム要素の値が変わった瞬間に何かをしたい場面は山ほどあります。jQuery では主に以下の 4 つのイベントを使い分けます。

イベント	発火タイミング	主な用途
change	値が変わって確定した時	セレクト / ラジオ / 完全入力後のバリデーション
input	テキストで1 文字変更されるたび	リアルタイム検索 / 即時バリデーション
keyup	キーが離れた瞬間	input 非対応の古い環境の保険
keypress	文字キーが押された瞬間	非推奨。記号や IME 入力で発火しないことあり

change — 値の確定で発火

もっとも基本的な変更検知イベント。テキストボックスではフォーカスが外れた時、セレクトボックスやラジオボタンは選択を変えた瞬間に発火します。

// テキストボックスの change (一度、テキストボックス外をクリック等しないと発火しない)
$('#textInput').change(function() {
    console.log('値が変わった:', $(this).val());
});

// セレクトボックスの change (選択した瞬間に発火)
$('#mySelect').change(function() {
    var selected = $(this).val();
    console.log('選択:', selected);
});

// ラジオボタンの change (チェックが変わった時)
$('input[name="gender"]').change(function() {
    console.log('選択:', $(this).val());
});

// チェックボックスの change
$('#agree').change(function() {
    console.log('チェック状態:', $(this).is(':checked'));
});

input — リアルタイムで発火

HTML5 で標準化されたイベント。テキストボックス / textarea / contenteditable などで値が変わるたびに毎回発火します。リアルタイム検索やプレビュー機能に最適。

// 入力 1 文字ごとに発火 (現代の主流)
$('#searchBox').on('input', function() {
    var keyword = $(this).val();
    console.log('入力中:', keyword);
    // ここで AJAX 検索など
});

change との違い: input は確定前に発火、change は確定後に発火。リアルタイム性を求めるなら input。

keypress と keyup の違い

// keypress: キーが押された瞬間 (文字キーのみ、IME入力中は発火しない場合あり)
$('#input').keypress(function(e) {
    console.log('押された:', e.which);
});

// keyup: キーが離された瞬間 (修飾キーも含む全キー)
$('#input').keyup(function(e) {
    console.log('離した:', e.which);
});

キーコードを取りたい時はkeyup が安定。modern Web では keypress は非推奨です。MDN の Deprecated 一覧にも入っています。

セレクト / ラジオ / チェックボックスは change が定石

<select id="mySelect">
    <option value="1">選択肢 1</option>
    <option value="2">選択肢 2</option>
    <option value="3">選択肢 3</option>
</select>

<input type="radio" name="gender" value="M"> 男性
<input type="radio" name="gender" value="F"> 女性

<input type="checkbox" id="agree"> 利用規約に同意

// 値を取得
$('#mySelect').change(function() {
    var v = $(this).val();
    console.log(v);  // '1' / '2' / '3'
});

// セレクトされた option のテキストも取りたい場合
$('#mySelect').change(function() {
    var text = $('option:selected', this).text();
    console.log(text);
});

// ラジオ: name 単位でグルーピング
$('input[name="gender"]').change(function() {
    var val = $('input[name="gender"]:checked').val();
    console.log(val);
});

IME (日本語入力) と仲良くする

日本語サイトでは IME 入力中はイベントが発火しない (Chrome 系) という落とし穴があります。確定後のみ処理したい場合は compositionstart / compositionend を使う:

var composing = false;

$('#searchBox')
    .on('compositionstart', function() { composing = true; })
    .on('compositionend',   function() {
        composing = false;
        // IME 確定後に値を取得
        triggerSearch($(this).val());
    })
    .on('input', function() {
        if (composing) return;     // IME 中は無視
        triggerSearch($(this).val());
    });

function triggerSearch(keyword) {
    console.log('検索:', keyword);
}

複数イベントを同時バインド

テキストボックスの値をあらゆる変更タイミングで補足したい場合は、.on() で複数イベントをまとめて指定するのが便利。

// テキスト入力 / コピペ / change を全部捕捉
$('#input').on('input change paste', function() {
    console.log('変更検知:', $(this).val());
});

パフォーマンスのコツ: デバウンス

input イベントは毎キーストロークで発火するため、AJAX 検索などをそのまま接続するとサーバー負荷が爆発します。デバウンス (連続呼び出しを 1 回にまとめる) で抑えるのが定石。

// シンプルなデバウンス
var timer;
$('#searchBox').on('input', function() {
    clearTimeout(timer);
    var val = $(this).val();
    timer = setTimeout(function() {
        console.log('実行:', val);   // 0.3 秒タイプが止まったら実行
    }, 300);
});

// lodash 等を使えば 1 行
// $('#searchBox').on('input', _.debounce(function() { ... }, 300));

jQuery を使わない modern JS の書き方

jQuery 不要時代の標準コードはこちら (参考)。

// vanilla JS
document.querySelector('#searchBox').addEventListener('input', function(e) {
    console.log(e.target.value);
});

document.querySelector('#mySelect').addEventListener('change', function(e) {
    console.log(e.target.value);
});

イベント別の使い分けまとめ

やりたいこと	選ぶイベント
セレクト / ラジオ / チェックの変更	change
テキストのリアルタイム検索	input + デバウンス
テキストの入力完了後のバリデーション	change or blur
Enter キーで送信	keyup + e.which === 13
IME 確定後に処理	compositionend
コピペも含めたい	input (paste も自動的に input を発火)

FAQ

Q: focus が外れる前にテキスト変更を検知したい
A: change ではなく input を使う。

Q: ラジオボタンの value じゃなくて選択された label が欲しい
A: $('input[name="x"]:checked').next('label').text() や、data-label 属性を仕込んでおく。

Q: チェックボックスの change が発火しない
A: JS で .prop('checked', true) しただけだと発火しない。手動で .trigger('change') を呼ぶ必要あり。

Q: 複数の input をまとめて監視したい
A: $('form').on('input change', 'input, select, textarea', function() {...}) でイベント委譲。動的追加要素にも対応。