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

我在这个简化的jsfiddle示例中上演了这个错误。我与此错误相关的问题是我正在构建一个财务应用程序，如果输入数据发生更改，我需要显示“保存更改”按钮。因为我需要立即插入千位分隔符keyup（如果需要），这个错误真的让我很恼火并且破坏了这个功能。

要重现它，请转到jsfiddle示例，在 chrome 中打开控制台，在第一个输入中键入任何内容，keyup事件将被正确触发，而不是使用选项卡取消焦点输入或在其外部单击，并且change不会触发事件。对其他输入执行相同操作，change将被触发。

我在 Firefox 中对此进行了测试，它按预期工作。

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

和

尝试使用直接从 Chrome 网站全新安装的 Google Chrome 15.0.874.106。

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

4

5 回答 5

8

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

我不认为这是一个错误。

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

于 2012-09-20T10:22:42.810 回答
6

这看起来像是一个有效的 Chrome 错误。onChange我的猜测是，自从用户上次关注输入以来，更改值会重置 Chrome 依赖触发事件的任何内容。我建议使用一种适用于所有浏览器的解决方法（不幸的是）。

我在这里用这样的例子更新了你的代码。这个想法是当输入获得焦点时存储原始值，然后在输入模糊时将原始值与更新值进行比较。如果它是不同的值，则执行与更改回调相同的逻辑。

于 2012-09-14T18:44:07.300 回答
4

似乎这种行为是意料之中的。（参见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() 之前检查您的前后值，就像 Mozilla 所做的那样。）

blur: function(){
   $(this).change();
}
于 2012-09-21T19:39:33.397 回答
1

这似乎是我的行为。如果元素的值通过脚本更改，那么您的 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的伪代码

注意：通过脚本更改值时不会触发浏览器更改事件。

于 2012-09-21T15:33:30.993 回答
0

我会从一个稍微不同的角度（所以解决），每次执行 keyup 事件时检查字段的值。见http://jsfiddle.net/vCxme/3/

于 2012-09-21T11:00:49.337 回答