Cómo sugerir que Google Smart Lock use un campo de entrada específico como nombre de usuario en un sitio web

He estado tratando de buscar alguna documentación sobre cómo insinuar Google Smart Lock for Chrome para utilizar un campo de entrada específico como el asociado con el nombre de usuario sin ninguna suerte.

Para la contraseña funciona perfectamente ya que usa type="password" pero cuando se trata del nombre de usuario en un formulario de varios campos, donde el nombre de usuario no se especifica antes de la contraseña o no como el primer campo en el formulario, elige otro de los campos en el formulario como nombre de usuario.

¿Alguien tiene alguna pista sobre cómo hacer que Google Smart Lock use un campo de entrada específico como nombre de usuario?

Google Smart Lock es una característica incorporada de Chrome, existe la misma función en Firefox. Se basará en el último tipo de entrada = “contraseña” para detectar el campo de contraseña que se guardará. Aquí hay algunas cosas que he probado en Firefox y Chrome.

  1. Cromo:
    • Basado en la última contraseña de tipo de entrada (incluso tiene más de 2 elementos de contraseña de entrada)
    • Si 2 última contraseña de tipo de entrada tiene el mismo valor -> decida guardar la contraseña
    • Busque un texto de tipo de entrada superior de la primera contraseña de tipo de entrada ( No es un tipo oculto ni está deshabilitado ) para elegirlo como nombre de usuario
  2. Firefox:
    • Basado en la última contraseña de tipo de entrada (incluso tiene más de 2 elementos de contraseña de entrada)
    • Si 2 última contraseña de tipo de entrada tiene el mismo valor -> decida guardar la contraseña
    • Busque un texto de tipo de entrada superior de la primera contraseña de tipo de entrada ( No es un tipo oculto ) para elegirlo como nombre de usuario , tenga en cuenta que FF permite la entrada deshabilitada es un nombre de usuario 🙂

Solo necesitas poner:

 autocomplete="username" 

en el campo requerido (generalmente el correo electrónico del usuario o el nombre de usuario del sitio).

entonces sabrá usarlo como la clave para la función de locking inteligente (probado en Chrome).

Puede usar display: none css para ocultar una entrada de nombre de usuario. El siguiente fragmento de código está tomado del documento de diseño de Chromium . Discuten algunos casos de uso allí.

  

Echa un vistazo a este artículo que explica cómo hacerlo funcionar en Chrome, Firefox y Safari para 3 casos diferentes: inicio de sesión normal, nombre de usuario primero y página de restablecimiento de contraseña con entrada de verificación primero.

También he hecho un CodePen donde puedes probarlo.