【问题标题】:jQuery bind to keyup only, not focusjQuery 仅绑定到 keyup,而不是焦点
【发布时间】:2012-04-26 21:23:09
【问题描述】:

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

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

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

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

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

【问题讨论】:

    标签: javascript jquery events navigation keyup


    【解决方案1】:

    只需使用.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.oldValue 出现时将其替换为 $(this).data("oldValue")。从技术上讲,这会导致代码变慢,但我相信不会有人注意到。

    See it in action.

    【讨论】:

    • 除了我希望它在用户键入时(或在他们停止键入之后)捕获值,而不必切换出文本字段。我会将此注释添加到问题中。
    【解决方案2】:

    这样就可以了,设置一个自定义属性并检查:

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

    警惕多次触发的事件。

    【讨论】:

      【解决方案3】:

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

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

      FIDDLE

      【讨论】:

      • 我喜欢这个,又好又简单,它与我的延迟计时器配合得很好。谢谢!
      【解决方案4】:

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

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-12-25
        • 2011-06-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-04-22
        • 1970-01-01
        相关资源
        最近更新 更多