5

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

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

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

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

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

4

4 回答 4

6

存储该值，并在任何关键事件上检查它是否已更改，如下所示：

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

小提琴

于 2012-04-15T02:30:09.613 回答
4

只需使用.change事件。

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

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

如果不是“纯粹”的话，我个人认为更理智的另一种方法是对您的处理程序进行编程以记住元素的旧值，并且只有在它发生变化时才做出反应。

$(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。从技术上讲，这将具有使代码变慢的缺点，但我相信没有人会注意到。

看到它在行动。

于 2012-04-15T02:16:24.080 回答
1

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

$('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.'); 
});

警惕多次触发的事件。

于 2012-04-15T02:28:14.037 回答
0

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

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

$(function(){
    $(selector).on('keyup', function(){
        if ($(this).val()!='') {
            alert('char was entered');
        }
    })
});
于 2014-08-07T09:35:42.410 回答