How to hint Google Smart Lock to use a specific input field as the username in a website

社会主义新天地 提交于 2019-12-05 07:34:35

Google smart lock is a build-in feature of chrome, there is the same function on firefox. It based on the last input type="password" to detect password field would be saved. Here are some things I have tested on FireFox and Chrome

  1. Chrome:
    • Based on the last input type password (you even have more than 2 input password elements)
    • If 2 last input type password has the same value -> decide to save password
    • Look up to find an upper input type text from the first input type password (Not a hidden type nor disabled) to pick it as username
  2. Firefox:
    • Based on the last input type password (you even have more than 2 input password elements)
    • If 2 last input type password has the same value -> decide to save password
    • Look up to find an upper input type text from the first input type password (Not a hidden type) to pick it as username, note that FF allow input disabled is an username :)

You just need to put:

autocomplete="username"

on the required field (usually the user's email, or site's user name).

then it will know to use it as the key to the smartlock feature (tested on chrome).

You can use display: none css to hide a username input. The following code snippet is taken from Chromium design document. They discuss a few use cases there.

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

Check out this article that explains how to make it work on Chrome, Firefox and Safari for 3 different cases: normal login, username first login and reset password page with verification input first.

I have also made a CodePen where you can try it out.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!