如果自动完成功能打开，为什么 javascript onchange 事件不会触发？答案

【问题标题】：Why does the javascript onchange event not fire if autocomplete is on?如果自动完成功能打开，为什么 javascript onchange 事件不会触发？
【发布时间】：2010-09-25 11:38:07
【问题描述】：

我有一个带有 onchange 事件的文本框。当用户使用自动完成功能填充文本框时，为什么不触发此事件？

我正在使用 Internet Explorer。是否有一个标准且相对简单的解决方案来解决此问题，而无需我禁用自动完成功能？

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

上次我遇到这个问题时，我最终使用了 Internet Explorer 的 onpropertychange 事件。我读到了here on MSDN：这是绕过它的推荐方法。

【讨论】：

但似乎每次用户按键时都会触发。我在这里做错了吗？
不，不幸的是它是如何工作的。但我刚刚找到了这个资源，它似乎以一种很好的方式解决了这个问题：jehiah.cz/archive/onchange-and-autocomplete
注意：onpropertychange 在 IE9 中似乎不再可靠工作，至少在我的测试中是这样。

【解决方案2】：

我之前遇到过这个烦人的功能，当时我的解决方案是使用onfocus事件记录文本框的当前值，然后使用onblur事件检查当前值是否与保存的值匹配在聚焦期间。例如

<input type="text" name="txtTest" value="" onfocus="this.originalvalue=this.value" onblur="if (this.value != this.originalvalue) alert('Test has changed')"/>

【讨论】：

这发生在我最新版本的 Chrome 中，所以很明显这不是 IE 特定的事情。 onblur 解决了我的问题。
onblur 也解决了我的问题，并在 IE 7、8、9 和 9 comp 中工作。谢谢
这对我很有用 - 这是我的 jquerified 翻译：$("#my-field").focus(function(){this.originalvalue=this.value}).blur(function(){if (this.value != this.originalvalue) alert('changed')});

【解决方案3】：

我只是为需要触发文本更改事件的文本框关闭自动完成

'Turn off Auto complete 
'(it needs to fire the text change event)
 txtYourTextBox.Attributes.Add("AutoComplete", "off")

只需将其放在页面加载中即可。

或者，您可以将属性添加到 input 元素或整个 form 的标记中：

<input type=text autocomplete=off>

或

<form autocomplete=off>

【讨论】：

这不是真正的解决方案。自动完成对用户很有用。问题在于如何使用它，而不是禁用它。
我喜欢它！迫使浏览器制造商为他们想要添加的这些绒毛功能提供更好的支持，以便我们可以使用它们……否则我们只会禁用它们！
这是一个解决方案，因为它关闭了一个不起作用的功能。我有一个实时验证每个字段的表单，当它们被自动填充时，它们仍然显示错误。我宁愿不使用自动填充，然后有一个损坏的表格。如果浏览器供应商在自动填充发生时引发事件，那就太好了。

【解决方案4】：

我刚刚发现using jQuery 1.4 to set change event可以解决这个问题。如果您已经熟悉 jQuery，这似乎是解决此问题的最简单方法。

【讨论】：

我正在使用 jquery 1.7.1 并且使用 tab 键选择自动完成条目没有触发更改事件。我使用了 Tim C 的解决方案。

【解决方案5】：

基于 Tim C 的回答，这是我想出的简单 jquery，用于处理页面上的所有文本框：

$("input[type=text]").bind("focus change",function(){
    this.previousvalue = this.value;
}).blur(function(){
    if (this.previousvalue != this.value){
        $(this).change();
    }
})

如果你不关心 onchange 触发多次，你可以让它更简单：

$("input[type=text]").blur(function(){
    $(this).change();
})

【讨论】：

【解决方案6】：

我发现以下 jQuery (v1.10+) JavaScript 在 HTML 文本输入字段自动完成文本的情况下确实有效。这至少在 Mac OS X 10.8.5 上的 Safari 6.1.1 中经过测试可以可靠地运行，但也应该在其他兼容的浏览器中运行：

$("input:text[id=text_field_id]").bind("focus change keyup blur", function(event) {
// handle text change here...
});

似乎添加 blur 事件处理程序是完成这项工作的关键，尽管其他事件处理程序有助于确保在文本更改时调用事件处理程序，无论是由于编辑还是新输入浏览器的自动完成功能。

只需将上面的"input:text[id=text_field_id]" 代码替换为所需文本输入字段的相关选择器，或者如果使用id 属性来引用您的字段，请将text_field_id 替换为您的文本字段的id 属性值。

【讨论】：