html - 如何提示 Google Smart Lock 使用特定输入字段作为网站中的用户名

Question

我一直在尝试搜索一些有关如何提示 Google Smart Lock for Chrome 使用特定输入字段作为与用户名关联的输入字段的文档，但没有任何运气。

对于密码，它在使用时可以完美地工作，type="password"但是当它归结为多字段表单中的用户名时，用户名没有在密码之前指定或者不是作为表单中的第一个字段，它会选择另一个字段形式作为用户名。

有没有人知道如何提示 Google Smart Lock 使用特定的输入字段作为用户名？

Answer 1

谷歌智能锁是chrome的内置功能，firefox上也有同样的功能。它会根据最后输入的 type="password" 来检测密码字段。以下是我在 FireFox 和 Chrome 上测试过的一些东西

1. 铬合金：
   • 基于最后输入的密码类型（您甚至有超过 2 个输入密码元素）
   • 如果 2 最后输入类型密码具有相同的值 -> 决定保存密码
   • 查找从第一个输入类型密码（不是隐藏类型也不是禁用）中查找上部输入类型文本以将其选为用户名
2. 火狐：
   • 基于最后输入的密码类型（您甚至有超过 2 个输入密码元素）
   • 如果 2 最后输入类型密码具有相同的值 -> 决定保存密码
   • 查找从第一个输入类型密码（不是隐藏类型）中查找上部输入类型文本以将其选为用户名，注意 FF allow input disabled 是用户名:)

Answer 2

你只需要输入：

autocomplete="username"

在必填字段（通常是用户的电子邮件或站点的用户名）上。

然后它将知道将其用作智能锁功能的关键（在 chrome 上测试）。

Answer 3

您可以使用display: nonecss 隐藏用户名输入。以下代码片段取自Chromium 设计文档。他们在那里讨论了一些用例。

<style>
  #emailfield { display: none; }
</style>
<form id="login" action="login.php" method="post">
  <input id="emailfield" type="text" value="me@example.test" autocomplete="username">
  <input type="password" autocomplete="current-password">
  <input type="submit" value="Sign In!">
</form>

查看这篇文章，它解释了如何使其在 Chrome、Firefox 和 Safari 上运行 3 种不同的情况：正常登录、用户名优先登录和重置密码页面，首先验证输入。

我还制作了一个CodePen，您可以在其中试用。