如何实现仅用户名场景下浏览器自动填充与记忆功能？

我有两个登录相关页面：

• 第一个页面只提供用户名输入框，提交后系统会验证用户状态：
  • 如果用户已经通过第三方身份提供商完成认证，就跳转至对应提供商页面完成登录
  • 如果用户需要密码认证，就跳转至带密码输入框的第二个页面
• 我的需求是：两种场景下浏览器都能记住并自动填充用户名（密码可选记忆）

目前的实现情况：

• 密码认证场景：已经通过在第二个页面添加隐藏的用户名输入框，实现了用户名和密码的记忆，而且第一个页面也能自动填充用户名
• 第三方身份提供商认证场景：浏览器只会显示历史输入的下拉列表，不会自动填充用户名，我希望这个场景也能和密码认证时一样自动填充用户名

我试过两个方案，但都有问题：

1. 在第一个页面加空的隐藏密码输入框：完全没用
2. 在第一个页面加带虚拟值的密码输入框并移到屏幕外：
   • 浏览器会弹出提示询问是否存储用户名和虚拟密码，体验很差
   • 用户走密码登录流程时，会频繁提示用虚拟值更新密码

另外我不想用localStorage自己实现自动填充，最好是利用浏览器原生的仅用户名自动填充功能，让用户能通过浏览器的凭据管理器来管理这些信息。

1. 规范第一个页面的表单与输入框配置 #

浏览器的自动填充机制依赖于对表单字段的正确识别，先调整第一个页面的结构：

• 用<form>标签把用户名输入框包起来，哪怕实际提交逻辑是JS处理，表单的存在能让浏览器识别这是登录相关场景
• 给用户名输入框明确设置autocomplete="username"，告诉浏览器这是用户名字段
• 给表单设置一个合理的action占位值，示例代码：

<form id="username-form" action="/login/verify" method="post">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username" autocomplete="username" required>
  <button type="submit">继续</button>
</form>

2. 第三方登录成功后触发凭据存储 #

当用户通过第三方身份提供商登录成功并回到站点后，用一个隐藏表单触发浏览器的凭据存储逻辑：

• 创建一个隐藏的表单，包含带autocomplete="username"的用户名输入框，以及一个空值的隐藏密码输入框（设置autocomplete="new-password"避免浏览器误判为需要存储的密码）
• 在登录成功的回调里填充用户名，提交表单后立即阻止跳转，示例代码：

<form id="hidden-cred-form" action="/dummy" method="post" style="display: none;">
  <input type="text" name="username" autocomplete="username" id="hidden-username">
  <input type="password" name="password" autocomplete="new-password" value="" style="display: none;">
</form>

// 第三方登录成功后的回调函数
function onSocialLoginSuccess(username) {
  const hiddenForm = document.getElementById('hidden-cred-form');
  const hiddenUsernameInput = document.getElementById('hidden-username');
  
  hiddenUsernameInput.value = username;
  
  // 提交表单前阻止默认跳转，避免页面刷新
  hiddenForm.addEventListener('submit', (e) => e.preventDefault());
  hiddenForm.submit();
}

这样浏览器会识别这是一次登录提交，从而存储用户名，而且因为密码为空，不会出现存储虚拟密码的问题，部分浏览器会直接存储仅用户名的凭据。

3. 保留密码认证场景的现有逻辑 #

密码认证跳转后的第二个页面，继续保留隐藏的用户名输入框并设置autocomplete="username"，密码框设置autocomplete="current-password"，确保浏览器能正确关联用户名和密码，不影响原有自动填充功能。

注意事项 #

• 不同浏览器的自动填充规则略有差异，优先使用HTML标准的autocomplete属性值（username、current-password等）
• 隐藏输入框尽量用display: none，不要用移出屏幕或visibility: hidden，部分浏览器会忽略这类非标准隐藏的字段
• 用户名输入框的name和id尽量设为username，符合浏览器的默认识别习惯

内容的提问来源于stack exchange，提问作者yaba