[解決済み] jQuery textbox change イベントは、textbox がフォーカスを失うまで発生しないのですか？

質問

テキストボックスのjQuery changeイベントは、テキストボックスの外側をクリックするまで発生しないことがわかりました。

HTMLです。

<input type="text" id="textbox" />

JSです。

$("#textbox").change(function() {alert("Change detected!");});

参照 のデモをご覧ください。

私のアプリケーションでは、テキストボックスの文字が変わるたびにイベントを発生させる必要があります。代わりにkeyupを使おうともしましたが...。

$("#textbox").keyup(function() {alert("Keyup detected!");});

...しかし、右クリック＆ペーストではkeyupイベントが発生しないことは既知の事実です。

何か回避策はありますか? 両方のリスナーを持つことは、何か問題を引き起こしそうですか?

どのように解決するのですか？

両方のイベントにバインドするのが典型的な方法です。貼り付けイベントへのバインディングも可能です。

このように複数のイベントにバインドすることができます。

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

もし、杓子定規に考えるなら、テキストをドラッグできるように mouseup にバインドし、その上に lastValue 変数を追加して、テキストが実際に変更されたことを確認する必要があります。

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

そして、もしあなたが super duper を使用する場合は、自動充填やプラグインなどに対応するためにインターバル タイマーを使用する必要があります。

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);