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

Question

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

对于密码，它使用DateTime时效果很好但是当它归结为多字段表单中的用户名时，在密码之前未指定用户名，或者不是表单中的第一个字段它选择表单中的另一个字段作为用户名。

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

Answer 1

Google智能锁是Chrome的内置功能，在firefox上有相同的功能。它基于最后一个输入类型=“密码”来检测密码字段将被保存。 以下是我在FireFox和Chrome上测试的一些内容

1. 铬：
   • 基于最后一个输入类型密码（您甚至有超过2个输入密码元素）
   • 如果2个最后输入类型的密码具有相同的值 - ＆gt;决定保存密码
   • 查找从第一个输入类型密码（不 隐藏类型，禁用）查找上输入类型文本以选择它以用户名
2. 火狐：
   • 基于最后一个输入类型密码（您甚至有超过2个输入密码元素）
   • 如果2个最后输入类型的密码具有相同的值 - ＆gt;决定保存密码
   • 从第一个输入类型密码（不 隐藏类型）中查找上输入类型文本，将其选为用户名 ，请注意，FF允许输入已禁用是用户名：）

Answer 2

你只需要把：

autocomplete="username"

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

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

Answer 3

您可以使用display: none CSS来隐藏用户名输入。以下代码段摘自Chromium design document。他们在那里讨论了一些用例。

<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>

请查看this article，其中介绍了如何在3种不同情况下使其在Chrome，Firefox和Safari上运行：普通登录，用户名优先登录和密码输入优先验证页面。

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