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

时间:2014-12-17 04:58:52

标签: forms google-chrome

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

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

4 个答案:

答案 0 :(得分: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的字段(无论表单字段定位如何),我会很感激指针!

答案 1 :(得分: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 :(得分:2)

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

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

我还必须将tabindex="-1"添加到元素中,以将其从制表符流中取出。

仍然不理想。

答案 3 :(得分:1)

我在这里运行相同的问题。在Chrome和Chrome中只有你可以在电子邮件字段中设置public function destroy($id) { $task = Task::withTrashed()->findOrFail($id); if($task->deleted_at == null){ $task->delete(); } else { $task->forceDelete(); } return back(); } 。这将让浏览器知道什么是正确的用户名字段。但是这只适用于chrome,所以我没有使用这个解决方案

文档: