如何编写HTML代码实现密码管理器自动填充TOTP输入框？

不少密码管理器宣称支持自动填充Google Authenticator等工具生成的TOTP验证码，原理与自动填充账号密码类似，但我编写的HTML表单无法触发Proton Pass的TOTP自动填充（账号密码可正常填充）。

我的表单代码如下：

<form id="login-form" action="login" method="post">
  <div>
    <label for="login-username" class="form-label">E-mail address</label>
    <input type="email" id="login-username" name="login-username" autocomplete="username">
  </div>
  <div>
    <label for="login-password" class="form-label">Password</label>
    <input type="password" id="login-password" name="login-password" autocomplete="current-password">
  </div>
  <div>
    <label for="login-totp" class="form-label">2FA code</label>
    <input type="text" id="login-totp" name="login-totp" placeholder="000000" inputmode="numeric" autocomplete="one-time-code">
  </div>
  <input type="submit" value="Submit">
</form>

我已尝试查阅开发者文档、拆分表单为两页、咨询AI工具等方法，均未解决问题。调研发现部分密码管理器仅为常用网站自动填充TOTP，且未公开明确的开发者配置要求。我联系Proton Pass后，对方建议查看其开源代码，但我未能从中找到有效信息，后续再次联系后对方表示已转至对应团队处理。

可能的解决方案尝试： #

• 调整字段命名：将TOTP字段的name/id改为更通用的命名，比如totp、otp、one-time-password，部分密码管理器依赖常见字段名识别验证码输入框。
• 增强语义化标识：添加pattern="[0-9]{6}"属性明确验证码为6位数字，或尝试将type改为tel（配合inputmode="numeric"），帮助密码管理器识别字段用途。
• 表单层级关联：在<form>标签上添加autocomplete="username current-password one-time-code"，明确表单包含登录相关的完整字段集合。
• 检查密码管理器条目配置：确保Proton Pass中对应网站的条目已正确保存TOTP密钥，且条目关联的域名与当前测试环境域名完全匹配（本地测试需手动添加本地域名到条目）。

补充说明： #

不同密码管理器的TOTP字段识别逻辑存在差异，部分产品未公开完整的开发者规范，仅通过内部规则（如字段名、页面结构、常用网站白名单）触发自动填充。如果上述方法均无效，可能需要等待Proton Pass官方团队的回复，或针对性分析其开源代码中的字段匹配逻辑。

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