Chrome - 您要保存此密码吗？提示获取不正确的值答案

【问题标题】：Chrome - Would you like to save this password? prompt getting incorrect valueChrome - 您要保存此密码吗？提示获取不正确的值
【发布时间】：2015-02-15 14:08:18
【问题描述】：

我有一个允许用户在私人网站上申请帐户的表单，但没有用户名字段。相反，该项目的规范要求用户输入他们的电子邮件地址和密码/确认密码。还有一些字段供用户输入他们的州和国家/地区。

提交表单时，Chrome 会显示一个提示，询问用户是否要保存密码，但它显示的是状态字段的值，而不是电子邮件地址字段。（电子邮件地址是帐户的实际用户名）。

我知道 Chrome 会遍历表单的字段，直到找到 id=password 的字段，然后它会向后遍历字段以找到 id=username。由于我没有 id=username 字段，并且 Chrome 与 id=email 无关，因此它似乎使用 id=password 字段之前的字段作为用户名。

如何强制 Chrome 使用 id=email 的字段作为用户名？

<form action="POST" src="#">
    <input id="email" type="text" />
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

上述表单提交后，会触发Chrome的提示：

Would you like to save this password?

Iowa             ********

请注意，“Iowa”是在 id=state 字段中输入的任何值，这当然是错误的。

此时很难将 id=email 更改为 id=username。有没有其他方法可以做到这一点并保持 id=email？

【问题讨论】：

如果您使用通过匹配 for 和 id 属性附加到其输入的标签，这会有所不同吗？ Like in this example
我要试试这个，但我不认为 Chrome 正在查看标签。它是 name= 或 id= ，我认为它默认需要用户名。我只是在想可能有一个属性或属性可以添加到电子邮件的中。

标签： forms google-chrome

【解决方案1】：

我遇到了同样的问题。解决了在密码前放置一个隐藏字段（显示：无）并使用登录字段值加载它：

<input id="login" type="text">
<input id="name" type="text">
<input id="browser-friendly-login-field-location" style="display:none">
<input id="password" type="password">
<input id="submit" type="submit" onclick="$('#browser-friendly-login-field-location').val($('#login').val());">

【讨论】：

【解决方案2】：

我在这里遇到了同样的问题。我发现（在其他地方阅读并测试过）在 chrome 和只有 chrome 中你可以在电子邮件字段上设置autocomplete="username"。这将使浏览器知道正确的用户名字段是什么。但是这只适用于chrome，所以我没有使用这个解决方案

文档：

【讨论】：

设置 autocomplete="username" 可能会解决值的存储问题（在首次登录后） - 但它无助于新客户的检索：因为 Chrome 然后检索用户名（而不是电子邮件）
即使遵循所有指南以及所有提示和技巧，Chrome 仍然为其密码管理器使用了错误的用户名输入字段。我最终将其他输入文本更改为 col=1 的 textarea 并且样式没有调整大小。只有这样 Chrome 才会选择正确的输入文本作为用户名，
只有那个答案对我有帮助。谢谢！

【解决方案3】：

Guilherme 的解决方案 display: none 对我不起作用，所以我在额外的登录字段上应用了以下 CSS 类：

.Login--hidden {
  height: 1px;
  position: absolute;  
  top: -1px;
  left: 0;
  width: 1px;
}

我还必须将 tabindex="-1" 添加到元素中，以将其从选项卡流中取出。

仍然不理想。

【讨论】：

【解决方案4】：

这个问题似乎只有一种解决方案。将 id="email" 重命名为 id="username" 也不能解决问题。 id 或 label 似乎无关紧要，浏览器使用紧接在 id="password" 字段之前的字段作为用户名，因此我将这两个字段一起移动，如下所示：

<form action="POST" src="#">
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="email" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

如果有人知道我如何在浏览器的保存密码提示中指定用作username 的字段（无论表单字段的位置如何），我将不胜感激！

【讨论】：

很遗憾，但我只能用您建议的方法解决问题：/