Chrome浏览器保存密码用户名栏优先获取id为username的元素值

开发项目中一个“新建用户”的功能，在填完昵称、账号、密码后点击保存，触发了Chrome浏览器的保存密码功能，可显示保存的内容居然是用户昵称+登录密码，而不是预想中的登录账号+登录密码

<form>
    <input type="text" id="username" placeholder="昵称"> //id为username
    <input type="text" id="accounts" placeholder="帐号">
    <input type="text" id="password" placeholder="密码">
</form>

通过各种排查发现原来是昵称的id命名为username导致的，而且还不分大小写，设为userName也会出现这种问题。后面把昵称的id设为非username，再保存就正常显示为账号+密码了

<form>
    <input type="text" id="nickname" placeholder="昵称">//id改成nickname
    <input type="text" id="accounts" placeholder="帐号">
    <input type="text" id="password" placeholder="密码">
</form>