在 Chrome 中使用 jquery 在文本输入上未触发更改事件答案

【问题标题】：Change event not firing on text input using jquery in Chrome在 Chrome 中使用 jquery 在文本输入上未触发更改事件
【发布时间】：2011-12-06 22:25:12
【问题描述】：

我在文本输入上的 jquery 更改事件有问题，该事件在 Firefox 和 IE 中按预期工作，但在 Chrome 中没有。我在文本输入上也有一个 keyup 事件来操作输入，但是当输入完成时，我需要运行一些额外的代码。我尝试使用这里有人建议的'blur'事件和'focusout'事件作为替代品，但后来我根本无法改变焦点——输入不断以某种方式将其夺回。代码如下：

 $('.textInput').keyup(function(event) { /* do stuff */ });
 $('.textInput').change(function(event) { alert('Changed!'); /* do other stuff */ });

和html：

 <input type="text" class="textInput" value="" />

我正在使用 jQuery 1.6.3。任何建议将不胜感激。 H.

【问题讨论】：

Works for me 在 Chromium 14/Ubuntu 11.04 中。
你能把Chrome给你的错误贴出来吗？如果您执行检查元素（右键单击页面），它应该会告诉您错误是什么。
您在页面上加载了哪些其他 js 代码可以使其重新获得焦点？ Change 仅在焦点发生变化时触发，这可能就是原因。
没有错误，只是没有触发更改事件。由于它适用于其他人，我改变了策略并将其缩小到 keyup 处理程序中的某些内容，以防止 Chrome 上的更改事件。这不是我的代码，所以我通过在 keyup 处理程序中运行更改处理程序中的代码来解决它——不是最有效的，但没有造成重大伤害。当我有时间时，我会尝试在 keyup 处理程序中找到有问题的代码。感谢您的关注。

标签： jquery google-chrome input onchange

【解决方案1】：

除非输入焦点切换到其他控件，否则不会触发更改事件

【讨论】：

【解决方案2】：

您可以使用 input 事件，就像一个魅力：

$('#search-form .term').bind('input', function(){
  console.log('this actually works');
});

来源：https://gist.github.com/brandonaaskov/1596867

【讨论】：

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.textInput').keyup(function (event) {
                var obj = $(this);
                if ((event.keyCode ? event.keyCode : event.which) === 13) {
                    $('#result').text('Enter has been triggered.');
                }
            }); ;

            $('.textInput').change(function (event) {
                var obj = $(this);
                $('#result').text('Input text has been changed:' + obj.val());
            }); ;
        });
    </script>
</head>
<body>
    <span id="result"></span>
    <br />
    Enter some text and press enter:
    <input type="text" class="textInput" value="" />
</body>
</html>

【讨论】：

【解决方案4】：

实际上，如果 'keyup' 事件更改了某些内容，Google Chrome 上有一个错误会导致 'change' 事件不会触发：

https://code.google.com/p/chromium/issues/detail?id=92492

该问题似乎自 2013 年 5 月 2 日起开放。

【讨论】：