在Firefox中使用Google自动填充时触发JavaScript事件

Question

我有一个表单，在其中禁用提交按钮，直到用户填写了所有必填字段。我最初使用onkeyup来跟踪必填字段，并在填写所有必填字段时启用按钮。

但是，有些用户抱怨说他们使用Google工具栏上的自动填充按钮填写了表单，但提交按钮仍然被禁用。

我通过为每个输入元素调用onpropertychange事件来解决IE中的这个问题，效果很好。

但是在Firefox中，我找不到一个事件会在点击Google自动填充按钮时触发。

非常感谢您的帮助。

- jack

---

这是6年前的问题（http://allinthehead.com/retro/102/the-times-they-are-onchanging），今天仍然存在。 - Crescent Fresh

天啊，自动填充真是烂透了：http://www.google.com/support/forum/p/Toolbar/thread?tid=7dcddc95f43dac19&hl=en - Crescent Fresh

Answer 1

感谢您的回答。由于我需要快速响应此问题，因此我使用了“setTimeOut（）”函数来检查必填字段并启用提交按钮。

$().ready(function() {
    CheckRequiredFields();
    timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
});

function AutoMonitorMandatoryField() {
    if ($("#btnSave").attr("disabled")) {
        CheckRequiredFields();
        timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
    }
}

crescentfresh - 我会研究一下 DOMAttrModified 事件，看看能否让它对我起作用。谢谢。

- jack

Answer 2

从这个 google工具栏支持帖子 来看，似乎自动填充不仅给开发人员带来了巨大麻烦，而且关闭它也非常困难。截至 2009 年 8 月，谷歌声称将支持在包含表单的 autocomplete="off" 属性，但是到今天为止，该功能似乎还没有发布。

以前，您可以给输入元素命名非意义的名称（例如 name="xx_Address_32423423"），以混淆自动填充（从而有效禁用它）。但是他们通过查看元素名称中的子字符串来使自动填充变得更加“智能”，以确定是否可以自动填充字段（从该帖子的投诉中可以看出）。

在你的情况下，你可能需要适应变化并找到一个在Firefox中等效的onpropertychange。看一下DOMAttrModified事件。具体来说，尝试检查event.attrName属性，以查看是否通过自动填充更改了value：

function realOnChange(event) {
    var attrName = event.propertyName || event.attrName;
    if(attrName === 'value') {
        // etc
    }
}

检查 event.propertyName是为了与您当前的onpropertychange实现保持兼容（如果可能）。

- Crescent Fresh

Answer 3

不需要添加复杂的setTimeOut或setInterval。

只需捕获表单中任何可重填文本框的“change”事件，遍历每个可重填字段，如果它不为空，则隐藏标签。

- Subgurim

---

更改事件没有被触发，我也看不到任何其他的事件在自动填充时被触发。似乎需要使用 $(window).load 并检查 $('input:-webkit-autofill')... 但即使这样有时候也只能部分解决问题... 如果你仍在寻找最终解决方案，我认为这比没有好。 - Intellix

当Chrome自动填充时，不会触发任何事件。 - enyo