Question

这似乎是一件简单的事情，但谷歌没有为我提供任何东西：

如何仅绑定到文本/值更改事件，不包括输入获得焦点？即，给出以下内容：

$(function(){
  $('input#target').on('keyup', function(){
    alert('Typed something in the input.');
  });
});

...当用户进出元素时，无论他们是否实际输入文本，都会触发警报。除非他们输入/更改文本字段中的文本，否则如何允许用户在不触发事件的情况下通过表单进行键盘导航？

注意：我正在显示脚本的简化版本，不使用change事件的原因是在我的实际代码中我有一个延迟计时器以便事件在用户停止键入一秒钟后发生，而不必更改焦点以触发事件。

Answer 1

存储值，并在任何键事件检查中是否更改，如下所示：

$(function(){
  $('input#target').on('keyup', function(){
      if ($(this).data('val')!=this.value) {
          alert('Typed something in the input.');
      }
      $(this).data('val', this.value);
  });
});

FIDDLE

Answer 2

只需使用.change事件。

更新：如果您想要实时更改通知，那么您是否必须完成keyup事件，这意味着您需要对处理程序进行编程以忽略那些不会导致的键在被修改的值中。

您可以使用被忽略的密钥代码的白名单来实现这一点，但它可能会变得丑陋：按 Del 会导致值被更改，除非光标位于输入的末尾在这种情况下它不会，除非输入中恰好有一个选定的范围，在这种情况下它会。

我个人觉得另一种方式，如果不是＆＃34;纯粹＆＃34;是编程你的处理程序以记住元素的旧值，只有在它发生变化时才会作出反应。

$(function() {
    // for each input element we are interested in
    $("input").each(function () {
        // set a property on the element to remember the old value,
        // which is initially unknown
        this.oldValue = null;
    }).focus(function() {
        // this condition is true just once, at the time we
        // initialize oldValue to start tracking changes
        if (this.oldValue === null) {
            this.oldValue = this.value;
        }
    }).keyup(function() {
        // if no change, nothing to do
        if (this.oldValue == this.value) {
            return;
        }

        // update the cached old value and do your stuff
        this.oldValue = this.value;
        alert("value changed on " + this.className);
    });
});

如果您不想直接在DOM元素上设置属性（实际上，它没有任何问题），那么无论何时出现$(this).data("oldValue")，您都可以替换this.oldValue。这在技术上会有使代码变慢的缺点，但我不相信有人会注意到。

<强> See it in action

Answer 3

这样做，设置一个自定义属性并检查：

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
});

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
});

警惕多次发生的事件。

Answer 4

这是另一个明确测试输入字段是否为空的版本。

如果输入为空，则不执行操作。

$(function(){
    $(selector).on('keyup', function(){
        if ($(this).val()!='') {
            alert('char was entered');
        }
    })
});

jQuery仅绑定到keyup，而不是焦点

4 个答案: