使用自动完成填充表单时，Javascript 不启用按钮

Posted 2023-03-14

【中文标题】使用自动完成填充表单时，Javascript 不启用按钮

【英文标题】：Javascript does not enable button when form is populated using autocomplete

【发布时间】：2016-12-13 16:58:36

【问题描述】：

下面的代码显示两个文本输入字段，并根据是否创建启用或禁用按钮。当人们完成表单时，还有一个 javascript 计时器可以启用按钮。

通过动态按钮创建和循环代码来启用或禁用按钮，当表单填充自动完成时，该按钮不会启用，直到在任何地方单击网页或用户在表单中输入字符。这会使人们感到困惑，因为表单已完成但按钮已禁用。

看起来表单实际上并没有完成，只是 Chrome/Firefox 将字段显示为完整，但在用户与页面交互之前实际上并没有这样做。

当表单通过自动完成功能自动完成时，如何让按钮启用？

<input type='text' id='username' autofocus />
<input type='password' id='password' />
<script type="text/javascript">
    if (document.getElementById('username').value != '' && document.getElementById('password').value != '') 
        document.write('<input type="submit" value="Login" />');
     else 
        document.write('<input type="submit" disabled="disabled" value="Login" />');
    
</script>

作为参考，这是在计时器上运行的代码，用于检查表单是否完整。

window.onload = function () 
    var check_interval = 250;
    window.setInterval( function() 
        if (document.getElementById('username').value != '' && document.getElementById('password').value != '') 
            document.getElementById('button').removeAttribute('disabled');
         else 
            document.getElementById('button').setAttribute('disabled', 'disabled');
        
    , check_interval);
;

编辑：onChange 不是解决此问题的好方法，因为自动完成不会在所有浏览器中生成事件。这个question的答案中有一些信息。 onChange 无论如何都不适用于我们的表单，一种表单让用户设置了密码，其中按钮仅在 zxcvbn lib 认为密码足够强时才启用。轮询对此很有效，onChange 似乎只有在用户移动到另一个字段后才会启动。

【问题讨论】：

您是否在每个输入上尝试过 onChange？

【参考方案1】：

使用间隔计时器来检查表单的值绝对不是最好的方法。相反，我建议在两个执行相同操作的表单字段上的 onChange 事件的事件处理程序中使用该代码。当两个字段中都有文本时，该按钮将立即启用。

【讨论】：

@Chris 是的，抱歉直到我输入这个答案后才看到你的评论。但是，是的，这绝对是最好的方法。

无需道歉！这应该是一个正确的答案。如果它适用于用户，我也会给你+1。他可能也可以只用 html 而不是 JS 写出输入按钮，然后禁用或启用该更改。

问题是您不能依赖浏览器在自动完成时触发更改事件。 ***.com/questions/11708092/detecting-browser-autofill 正是链接在那里的答案让我每秒轮询文本字段几次，这应该可以工作。

我想我会添加 onChange 调用作为测试。页面加载，但在我与页面交互之前按钮仍处于禁用状态。