Question

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

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

Answer 1

这个问题似乎只有一个解决方案。将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的字段（无论表单字段定位如何），我会很感激指针！

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

Answer 3

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

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

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

仍然不理想。

Answer 4

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

文档：

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

4 个答案: