影响自动填充解决方案的Javascript执行顺序

这个问题是关于我们的网站试图弥补Chrome坚持在不应该的情况下执行自动填充的问题

请注意：这个问题并不是专门关于自动填充问题的，在过去的几年中，这一问题得到了很好的记录。例如，以下是一些涉及该问题的有用页面：

• ​​

• ​

• ​

多年来，我们使用了几种类似于上述文章（特别是第一篇文章）中记录的解决方案

随着开发人员开发了变通方法，Chrome团队将努力禁用这些变通方法。目前，我不知道还有什么有效的解决方法。Chromium团队显然认为，任何带有密码字段的表单都是登录表单，它不想轻易地允许编辑密码，同时保留自动模糊功能

在任何情况下，我重申，我不是专门关注自动填充问题，而是针对它遇到的一些问题

我们已经在一些编辑页面上成功地解决了这个问题，但是没有一个完整的解决方案，因为下面的问题是这个问题的核心

问题在于，因为所讨论的字段是email address（用户名）和password，所以页面上还有其他javascript，这相当复杂。该javascript的目的是帮助用户实现以下功能：

确保条目符合某些基本验证

确保我们的数据库中没有使用电子邮件地址

确保条目不违反某些其他策略，例如使用名字、姓氏等作为密码

很早以前，我们的一项措施是在一定程度上阻止浏览器自动填充，即隐藏电子邮件地址和密码字段，只有在用户单击带有“更改电子邮件地址”标签的按钮后才会显示。这对用户产生了一些有益的影响，我将不再详述，但也阻止了Chrome的自动填充

然而，最近Chrome甚至开始自动填充隐藏字段。因此，当点击按钮并显示字段时，就会有数据填充到电子邮件地址中。但是，填充的数据是用户ID而不是电子邮件地址，因为我们允许使用用户ID或电子邮件地址进行日志记录，并且使用某些Chrome设置，用户ID被保存

处理此“功能”的下一步是添加一行jquery，以便在单击按钮时清除该字段的内容，如果未单击按钮，则让更新例程忽略伪自动填充

实际发生的问题是，不知何故，Chrome似乎正在将值插入到DOM中。其他作品似乎表明，每次DOM发生变化时，Chrome都会反常地不断尝试执行自动填充

下面是我尚未解决的一系列明显事件：

用户访问他的个人资料页面

Chrome自动填充隐藏的用户名

用户单击“更改电子邮件地址”

jquery使用val（“”）清除字段的内容

电子邮件地址字段上存在onblur验证，但该验证不应触发，因为该字段未模糊。事实上，光标甚至还没有放到字段中——用户必须这样做。我们知道发生验证的原因是，我们立即收到一条关于无效电子邮件地址的错误消息，因为它是用户ID格式而不是电子邮件地址格式

这里有两件“不可能”的事情

正在进行验证，似乎无法触发该验证

我们已经使用jquery清除了该字段。但是验证（不应该发生）仍然看到原始的自动填充和无效内容

可以解释这一点的理论是，当显示字段时，焦点会在javascript有时间实际清除DOM之前快速进入该字段，并且焦点会在眼睛看到它进入字段之前离开该字段，从而触发验证，同样在jquery生效之前

因此，理论可能是，事件的顺序是获得焦点，失去焦点，触发模糊验证，清除场。这将产生观察到的效果

因此，具体问题如下：

是什么导致焦点的获得和丢失

为什么在清除字段之前会发生这种情况，当字段变得可见时会发生这种情况

然而，另一种理论可能是“javascript处理事件的顺序不是它出现的顺序，而是其他一些预先确定的顺序”。我已经看到了一些关于这方面的信息，但我不知道如何控制它来解决问题

下面是一些代码片段。您会注意到，以前使用的一些自动填充阻塞策略仍然存在：

onblur=ValidFirstField（）

<input type="password" autocomplete="new-password" name="password1" id="password1" size="20" maxlength="$MAX_PASSWORD_LEN" onkeydown="clearMessage('pw_message'); displayMessage('pw_strength');" onkeyup="chkPass(this.value);" onblur="ValidFirstField(this, 'Password', $MIN_PASSWORD_LEN, $MAX_PASSWORD_LEN, ValidPasswordSafety, ['$companyname', '$fname', '$lname', '$email1', '$email2'], 'pw_message', ' not allowed; please choose another.', 1, 'password2' );" >

function ValidFirstField(field1, fieldname, minlen, maxlen, cfunc, aProhibited, msg_field, bad_msg, common_msg, mark_field)
{
    if (!field1.value.length)
    {
        return;
    }
    var login_prompt = document.getElementById('login-prompt');
    if (login_prompt)
    {
        login_prompt.style.display = STYLE_NONE;    /* clear in case set via ajax */
    }
    var msg = document.getElementById(msg_field);
    msg.innerHTML = '';
    var allowSubmit = true;
    if (field1.value.length < minlen || field1.value.length > maxlen)
    {
        msg.innerHTML = fieldname + ' must be between ' + minlen + ' and ' + maxlen + ' characters: ' + field1.value.length;
        allowSubmit = false;
        field1.focus();     // TODO temporarily suppress to prevent focus/onblur race in IE
    }
...

$('#show-email').click(function()
{
    chg_email_clicked = true;
    $('#chg-email-clicked').val(1);
    // alert('chg=' + chg_email_clicked);
    $(this).hide();
    // from https://stackoverflow.com/questions/15738259/disabling-chrome-autofill mike nelson
    var $chrome_fake = $('.chrome-fake');
    $chrome_fake.show();
    window.setTimeout(function ()
    {
        $chrome_fake.hide();
    },1);
    $('#email1').val('');
    // var testemail1   = document.getElementById('email1').value;
    // alert(testemail1);
    $('.hide-email').show();
});