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 createOnBlurFunc = function(){
    var prevVal = '';
    return function(e){
        if(prevVal === $(this).val()){
           //same value
        } else {
           prevVal = $(this).val();
           // do something
        }
     }
};
$('input').blur(createOnBlurFunc());

Answer 4

我认为这是一种更为通用的方式，对于那些即时创建的方式：

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快。

拦截值在.blur（）事件中发生变化

4 个答案: