如何在网站上的多个登录字段上使用自动填充

Posted 2023-02-24

【中文标题】如何在网站上的多个登录字段上使用自动填充

【英文标题】：How to use autofill on multiple login fields on a website

【发布时间】：2018-01-05 01:47:06

【问题描述】：

当网页上有两个单独的登录字段时，我的浏览器（谷歌浏览器）假定它们都需要相同的凭据，这不是一个有效的假设。我本来希望我的浏览器将凭据分别存储到每个人。

<form id='login-form' method = "post" action = "/login.html">
    <ul>
        <li><input id = "username" name = "username" type = "text" placeholder = "Username"/></li>
        <li><input id = "password" name = "password" type = "password" placeholder = "Password"/></li>
        <li><input id = "button" type = "submit" value = "Login"/></li>
    </ul>
</form>

在另一个 HTML 页面上：

<form id='dx-login-form' method = "post" action = "/dxLogin">
    <ul>
        <li><input id = "dx_username" name = "dx_username" type = "text" placeholder = "Username"/></li>
        <li><input id = "dx_password" name = "dx_password" type = "password" placeholder = "Password"/></li>
        <li><input id = "button" type = "submit" value = "Login"/></li>
    </ul>
</form>

【参考方案1】：

您可以为第二个登录表单提供不同的自动完成标识符，这样它就不会从第一个登录表单自动填充。

    <li><input id = "dx_username" name = "dx_username" type = "text" placeholder = "Username" autocomplete = "dx_username" /></li>
    <li><input id = "dx_password" name = "dx_password" type = "password" placeholder = "Password" autocomplete = "dx_password" /></li>

欲了解更多信息：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

【讨论】：

它不起作用。当我登录主登录时，chrome 会询问我是否希望它记住登录凭据。我说是的，当我进入第二个登录表单时，我刚刚在第一个表单上输入的凭据会自动完成。登录到第二种表单时，Chrome 会再次询问是否应该存储密码。我说是的，当我再次输入第一个表单时，会建议第二个表单的凭据。