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

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

要重现它，请转到jsfiddle示例，在第一次输入中打开chrome控制器类型中的任何内容，keyup事件将被正确触发，而不是使用制表符或点击其外部的非焦点输入和{ {1}}事件不会被触发。对其他输入执行相同操作，change将被触发。

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

我正在使用的Chromium版本是14.0.835.202（Developer Build 103287 Linux）Ubuntu 11.10

和

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

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

Answer 1

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

我认为这不是一个错误。

在HTML元素上使用.val（value）将重置“手动更改的”标记，因此不会发生更改事件（因为用户不会手动更改任何内容 AFTER < / strong> val（）操作）。

Answer 2

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

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

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

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

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

Answer 4

这似乎是我的行为..如果通过脚本更改元素的值，则不会触发onchange。在这种情况下，您需要保存值onfocus并检查值onblur并手动触发onchange。

见下文，

DEMO： 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/

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

5 个答案: