浏览器登录自动完成

Question

我已经为用户可以拥有不同帐户类型的网站实现了登录，例如：

A型（默认）

Username: characters and numbers
Password: characters and numbers

B型（序列号）

Username: only numbers, min 10
Password: characters and numbers

当用户访问登录表单时，首先允许他/她选择他们想要使用的登录类型，然后他们继续进行实际登录。

问题的先决条件 用户已启用本机Offer to save passwords并已保存Type A和Type B凭据以登录，然后注销并最终尝试再次登录。

问题”： 当用户选择Type A登录时，将关注浏览器建议预填充字段的用户名，但浏览器会建议Type A和Type B。

问题 有没有办法以某种方式标记凭据在保存时的时间点，以便下次浏览器只建议相应的凭据。

P.S：欢迎任何其他可能的解决方案或有价值的信息:)

更新检查规格后： https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

我添加了autocomplete="section-uniqueGroupName"并确保name和id是独一无二的。

用户名登录

<form>
<input type="text" name="login-userName" id="login-userName" autocomplete="section-userName">
<input type="password" name="password-userName" id="password-userName" autocomplete="section-userName>
<button type="submit">Submit</button>
</form>

使用卡号登录

<form>
<input type="text" name="login-serviceCard" id="login-serviceCard" autocomplete="section-serviceCard">
<input type="password" name="password-serviceCard" id="password-serviceCard" autocomplete="section-serviceCard>
<button type="submit">Submit</button>
</form>

但它仍然似乎没有成功...

所以调查继续进行，这让我想知道是否实际上只使用本机方法html attributes而不涉及JS实现以下目的： 1.按登录类型分隔用户凭据 2.并且（或至少）自动填充所选类型的登录的最后使用的凭证

如果它实际上是可能的并且在网络上有一个活着的例子，那么我们将非常感激能够看一看：鞠躬：

Answer 1

应该最简单的解决方案是确保输入的名称不同。例如：

input {
  width: 200px;
  display: block;
}

form,
input {
  margin-bottom: 5px;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<form action="javascript:void()">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Login" />
</form>

<form action="javascript:void()">
  <input type="number" name="susername" pattern="\d{10,}" />
  <input type="password" name="spassword" />
  <input type="submit" value="Login" />
</form>

浏览器应根据其名称识别输入，为解决冲突提供不同的名称。

Answer 2

如果您对A类和B类输入的名称不同，浏览器将知道它是一个不同的输入，并根据用户选择的输入给出建议。

Answer 3

在选择一个选项后，您还可以通过JavaScript将表单类型A或B添加到Document DOM。

Answer 4

我认为自动填充会考虑HTML表单中的位置。

所以我建议你在表单中添加它们（两者）并一次只显示一个。

例如：

<form>
<input type="text" name="lgn-userName" id="login-userName" style="display:none">
<input type="text" name="lgn-serviceCard" id="login-serviceCard">
<input type="password" name="password" id="password">
<button type="submit">Submit</button>
</form>

请注意，如果您在“第一个”（仅限）输入中键入了许多不同的登录信息，您将在第一个输入中获得有关此技巧的建议。 （至少在同一表格上）