保存密码提示行为在浏览器之间不一致：Firefox、Chrome、Edge

Question

我有一个简单的 html 表单，允许登录用户更新他们的密码。最初，表单不包含用户名字段。因为它不包含用户名，所以当 Firefox 提示用户保存新密码时，提示将有一个空白的用户名字段：

为了解决这个问题，我在下面的示例代码中添加了一个用户名字段，在呈现页面之前使用当前登录的用户名填充该值，并使用 css 隐藏输入（.visually-hidden 具有 display:none;）。这对 Firefox 产生了预期的效果，现在它会在“保存密码”提示中填充用户名。

但是，在此更改之后，Chrome 和 Edge 不再提示保存用户密码。在更改之前，Chrome 和 Edge 可以正常工作，甚至以某种方式填充了提示中的用户名字段。修改后没有提示保存修改后的密码。

有没有人知道我应该怎么做才能让保存密码的行为在 Firefox、Chrome 和 Edge 之间保持一致？我试过取消隐藏用户名输入，添加/删除自动完成属性，从输入中删除预先填充的用户名值，使输入类型=“电子邮件”，但到目前为止在 Chrome 上没有任何效果（我没有验证 Edge 上的每次尝试）。

谢谢。

    <form action="https://[example].com/password-confirm/" method="post" id="NewPasswordForm" name="NewPasswordForm" novalidate="novalidate">
  <fieldset>
    <input class="input-text visually-hidden" type="text" name="username" value="my_email@example.com" autocomplete="username email">

    <div class="form-row  required" aria-required="true">
      <label for="dwfrm_resetpassword_password"><span class="error-icon"></span><span>New Password</span><span class="required-indicator">*</span></label>
      <div class="field-wrapper">
        <input class="input-text password required" type="password" id="dwfrm_resetpassword_password" name="dwfrm_resetpassword_password" value="" placeholder="" maxlength="255" minlength="6" aria-required="true" aria-invalid="false">
      </div>
      <div class="form-caption "></div>
    </div>

    <div class="form-row  required" aria-required="true">
      <label for="dwfrm_resetpassword_passwordconfirm"><span class="error-icon"></span><span>Verify Password</span><span class="required-indicator">*</span></label>
      <div class="field-wrapper">
        <input class="input-text password required" type="password" id="dwfrm_resetpassword_passwordconfirm" name="dwfrm_resetpassword_passwordconfirm" value="" placeholder="" maxlength="255" minlength="6" aria-required="true">
      </div>
      <div class="form-caption "></div>
    </div>

    <div class="form-row-button">
      <button type="submit" class="apply" name="dwfrm_resetpassword_send" value="Apply">Update Password</button>
      <a class="cancel" href="https://[example].com/preferences-summary/">Cancel</a>
    </div>
  </fieldset>
</form>

Answer 1

正如您所说，在更改之前它适用于 Edge 和 Chrome，更改后适用于 Firefox，所以我认为您可以单独将更改应用于 Firefox。

您可以先在 JavaScript 中检测浏览器是否为 Firefox，如果是，则添加可视隐藏的 input。那么input只会在Firefox中添加，不会影响Edge/Chrome：

<fieldset>
    <div id="invisible"></div>
    ...
</fieldset>

<script>
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        // Do Firefox-related activities
        document.getElementById('invisible').innerHTML = '<input class="input-text visually-hidden" type="text" name="username" value="my_email@example.com" autocomplete="username email">';
    }
</script>

Firefox 和 Chrome 中的结果：