Question

下面的代码显示两个文本输入字段，并根据是否创建启用或禁用按钮。当人们填写表格时，还有一个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只有在用户移动到另一个字段后才会启动。

Answer 1

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

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

1 个答案: