如果在keyup上添加char，则不会触发输入中的Google Chrome更改事件

Question

$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');// try with any other char
    },
    change: function(){
       console.log('I'm a changed input');
    }
});

我在这个简化的jquery示例中展示了这个bug。我与这个bug相关的问题是，我有一个正在构建的金融应用程序，我需要显示"保存更改"。按钮，如果输入数据发生变化。因为我需要立即在keyup上插入千个分隔符(如果需要的话)，这个bug真的让我很恼火，并且破坏了这个功能。

要重现它，去jsfiddle的例子，在chrome中打开控制台键入任何在第一次输入，keyup事件将被正确触发，而用tab或点击它的外部取消焦点输入，change事件将不会被触发。对其他输入做同样的操作，change将被触发。

我在Firefox中进行了测试，效果如预期。

我使用的Chromium版本是14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10

和

试用Google Chrome 15.0.874.106新安装直接从Chrome网站。

我可以在change事件上插入分隔符，但由于用户将输入大量7+数字，因此在输入时插入分隔符会更好。

Answer 1

我在IE9中尝试过，它的行为与Chrome相同。

我不认为这是一个bug。

在HTML元素上使用。val(value)将重置"手动更改的"标志，因此不会发生更改事件(因为用户在 val()操作之后不会手动更改任何内容)。

Answer 2

这看起来像是一个有效的Chrome bug。我的猜测是，改变值重置任何Chrome依赖于触发onChange事件，因为用户最后一次专注于输入。我建议使用一个在所有浏览器中都可以工作的解决方案。

我在这里用这样一个例子更新了你的代码。其思想是，当输入接收焦点时存储原始值，然后在输入模糊时将原始值与更新后的值进行比较。如果它是一个不同的值，那么执行您将放入更改回调中的相同逻辑。

Answer 3

这种行为似乎是意料之中的。(见http://dev.w3.org/html5/spec/common-input-element-apis.html event-input-change)。

它提到，如果您以编程方式更改该值，则必须手动触发事件。

根据https://developer.mozilla.org/en-US/docs/DOM/element.onchange, Mozilla实现如下更改:

  control.onfocus = focus;
  control.onblur = blur;
  function focus () {
      original_value = control.value;
  }
  function blur () {
      if (control.value != original_value)
        control.onchange();
  }

现在，你可以捕捉模糊事件，并从那里触发"改变"事件。(你可能需要在调用change()之前检查你的before和after值，就像Mozilla所做的那样。)

blur: function(){
   $(this).change();
}

Answer 4

在我看来这就是行为。如果一个元素的值是通过脚本改变的，那么你的onchange将不会被触发。此时需要保存onfocus，检查onblur，手动触发onchange。

见下文,演示:

http://jsfiddle.net/vCxme/6/

$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');
    },
    change: function(){
       console.log('I'm a changed input');
    },
    focus: function ( ){
        $(this).data('orig_value', $(this).val());
    },
    blur: function () {
        if ($(this).val() != $(this).data('orig_value')){
            $(this).change();
        }
    }
});
$('input#gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
    },
    change: function(){
       console.log('I'm a changed input');
    }
});

以上实现来自FF onChange

的伪代码

注意:当通过脚本更改值时，不会触发浏览器更改事件

Answer 5

我将从一个稍微不同的角度(因此绕过)，每次执行keyup事件时检查字段的值。见http://jsfiddle.net/vCxme/3/