登录表单已更改，用户名已更改为电子邮件，自动完成功能不断输入已保存的电子邮件

Question

这已经困扰我几个星期了。

我有一个登录表单，过去需要用户名 + 密码：

<form role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="username" type="text" placeholder="ex: AD\jdoe" required="required" autofocus="autofocus" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

由于以下原因，我将其更改为使用用户的电子邮件：

<form id="form" role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="ex: name@website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

令我惊讶的是，Chrome 仍然使用之前保存的凭据自动填写电子邮件字段。我在电子邮件字段的属性上尝试了各种排列但无济于事（也尝试重命名密码字段以防万一，并且仍然会自动填充）。 Firefox 也有相同的行为。

我还尝试重命名表单本身，并添加第二个表单只是为了测试浏览器在其中填写了两组输入。

最后，气急败坏，我想到了这个解决方法：

<form id="form" role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="ex: name@website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
        <!-- Workaround for inability to clear the autocomplete functionality of a previously named field-->
        <input id="username" type="text" name="username" class="hidden"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

缺点是如果用户之前保存了凭据，它不会保存用户的电子邮件，并且会继续自动填写密码（以及用户名）。

当然，我可以添加一些错误来触发以验证该字段是电子邮件等等，但我更好奇为什么会发生这种行为。似乎除了在我自己的浏览器中删除保存的凭据之外，我无法为我的用户重置自动完成数据以防止它错误地将用户名填写到电子邮件字段中。

还有什么好笑的，因为我将新输入设置为电子邮件类型，它会触发字段验证并抛出浏览器的验证错误，指出用户名不是有效的电子邮件（正如预期的那样）。

Answer 1

我引用了 this Stack Overflow question，它说：

It does not care what the field is called - just assumes the field before password is going to be your username.

我猜这就是问题所在。因为您的字段名为密码，所以它假定它之前出现的任何内容也与登录凭据相关（这是 100% 的时间）。

如果您不想在登录时自动完成，这是更简单的解决方案：只需使用 autocomplete="off" 作为字段的属性来禁用字段的自动完成。然而，如果你想让字段使用自动完成，而不是旧数据，那会有点困难，我不知道这个的完整解决方案。上面的文章只提到完全禁用自动完成。

可能解决此问题（允许自动完成但不允许旧数据）的方法是使用不同的输入字段名称。当然，我还没有测试过这个，但是如果你调用你的密码字段 password2 和你的用户名字段 username2 或类似的东西，并且没有 password 输入字段，Chrome 可能将其检测为一组不同的字段，并建立自己的新关联。不过，我不能保证这对你有用。

Answer 2

本身并不是真正的 "fix" 因为它并没有像我希望的那样真正透明地处理它，但是，我选择简单地删除解决方法字段并让我的用户通过提交表单时出现验证错误。

由于新字段有 type="email"，当他们尝试提交表单时，它将验证之前保存的用户名作为无效电子邮件并告知用户。然后用户将其更改为他们的电子邮件并再次点击提交，此时浏览器将提示他们保存登录凭据消息，从此以后所有人都会很高兴。

虽然没有我喜欢的那么干净，但它确实有效，而且对于之前保存过用户名的用户来说，这将是一次性的事情。

登录表单已更改，用户名已更改为电子邮件，自动完成功能不断输入已保存的电子邮件

Login form changed, username to email, autocomplete keeps entering in saved email

html

forms

login

autocomplete