javascript - .blur() イベント内の値の変更を傍受する

Question

関数を使用して.blur()、テキスト フィールドがフォーカスを失うたびにコードを実行しています (値が変更されていない場合も同様です)。

ここで、テキスト フィールドの値が変更された場合にのみ実行するロジックを追加する必要があります。.change()イベントを と組み合わせる方法はあり.blur()ますか? または、テキスト フィールドの値が を使用して変更されたかどうかを知る方法はあります.blur()か?

Answer 1

直接ではありませんが、focusイベントに値を保存できます..

何かのようなもの

$('input')
    .on('focus',function(){
        // store the value on focus
        $(this).data('originalValue', this.value);
    })
    .on('blur',function(){
        // retrieve the original value
        var original = $(this).data('originalValue');

        // and compare to the current one
        if (original !== this.value){
            // do what you want
        }
    });

---

もちろん、イベントごとに異なるハンドラーをバインドすることもできます..

$('input')
   .on('change', function(){/*your change code*/})
   .on('blur', function(){/*your blur code*/});

Answer 2

イベント変更は、フィールドがフォーカスを失い、コンテンツが変更されるたびにトリガーされます。change()の代わりに使用する必要があると思いますblur()。このjsfiddleを見てください

$('#in').change(function(){
    alert('change!');
});

入力がフォーカスを失ったときと値が変更されたときに同じコードを実行する必要がある場合は、両方のイベントを組み合わせることができます

$('in').on('change blur', function(){
   //code
});

Answer 3

これは、その場で作成されるものにとって、より一般化された方法だと思います。

var $bodyEl = $('body'), inputOldValue;

$bodyEl.on('focus', 'input, textarea, select', function () {
    inputOldValue = $(this).val();
});
$bodyEl.on('blur', 'input, textarea, select', function () {
    if (inputOldValue != $(this).val()) {
        $(this).trigger('changeBlur');
    }
});

input, textarea, select:inputセレクターよりも高速です。

Answer 4

クロージャを使用して前の値を保存し、後で比較できます

var createOnBlurFunc = function(){
    var prevVal = '';
    return function(e){
        if(prevVal === $(this).val()){
           //same value
        } else {
           prevVal = $(this).val();
           // do something
        }
     }
};
$('input').blur(createOnBlurFunc());