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

问题描述 投票:12回答:4

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

提交表单后,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?

forms google-chrome
4个回答
11
投票

这个问题似乎只有一个解决方案。将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的字段(无论表单字段定位如何),我将非常感谢指针!


2
投票

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

<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());"/>

2
投票

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

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

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

仍然不理想。


1
投票

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

文档:

© www.soinside.com 2019 - 2024. All rights reserved.