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

Posted 2021-03-27

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

提交表单后，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？

答案

这个问题似乎只有一个解决方案。将id="email"重命名为id="username"也无法解决问题。似乎与id或标签无关，浏览器使用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的字段（无论表单字段定位如何），我将非常感谢指针！

另一答案

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

<input type="text" name="user.loginId" id="new-loginId" tabindex="1" class="form-control" placeholder="Nome de usuário" value="${user.loginId}">
<input type="text" name="user.name" id="new-name" tabindex="2" class="form-control" placeholder="Nome completo" value="${user.name}">
<input type="text" id="browser-friendly-login-field-location" value="${user.loginId}" style="display:none"/>
<input type="password" name="user.password" id="new-password" tabindex="3" class="form-control" placeholder="Senha" oninput="checkPasswords(false);" onkeydown="checkPasswords(false);" onchange="checkPasswords(false);">
<input type="submit" onclick="$('#browser-friendly-login-field-location').val($('#new-loginId').val());"/>

另一答案

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

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

我还必须将tabindex="-1"添加到元素中，将其从tab-flow中取出。

仍然不理想。

另一答案

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

文档：

• https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete（这是有效的html）