過去バージョン

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

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

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);
});

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

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() {...}) でイベント委譲。動的追加要素にも対応。