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

$('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\'ma changed input'); } }); 

我在这个简化的jsfiddle示例中暂存了这个bug。 与此错误相关的问题是我有一个正在构建的财务应用程序,如果输入数据发生更改,我需要显示“保存更改”按钮。 因为我需要在keyup立即插入千位分隔符(如果需要),这个bug真的让我烦恼并破坏了这个function。

要重现它,请转到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位以上的数字,因此在键入时插入分隔符会更好。

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

我不认为这是一个错误。

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

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

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

看来这种行为是可以预期的。 (参见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(); } 

现在,您可以捕获模糊事件并从那里触发“更改”事件。 (在Mozilla调用change()之前,您可能需要检查前后值。)

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

这似乎是我的行为..如果通过脚本更改元素的值,那么您的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\'ma 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\'ma changed input'); } }); 

上面的实现来自FF onChange的伪代码

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

我会从稍微不同的角度(因此解决)接近,每次执行keyup事件时检查字段的值。 见http://jsfiddle.net/vCxme/3/