¿Cómo activar Autocompletar en Google Chrome?

Nuestro team de especialistas luego de días de investigación y de recopilar de información, encontramos la respuesta, esperamos que resulte de utilidad en tu plan.

Solución:

ACTUALIZACIÓN para 2017:Parece que la respuesta de Katie tiene información más actualizada que la mía. Futuros lectores: den su voto positivo a su respuesta.

Esta es una gran pregunta y para la que es sorprendentemente difícil de conseguir documentación. De hecho, en muchos casos, encontrará que la función Autocompletar de Chrome “simplemente funciona”. Por ejemplo, el siguiente fragmento de html produce un formulario que, al menos para mí (Chrome v. 18), se llena automáticamente después de hacer clic en el primer campo:

    

  First name:

  Last name: 

  E-mail: 

  Phone: 

  Address: 

Sin embargo, esta respuesta no es satisfactoria, ya que deja la solución en el ámbito de la “magia”. Profundizando, aprendí que Chrome (y otros navegadores habilitados para autocompletar) se basan principalmente en pistas contextuales para determinar el tipo de datos que se deben completar en los elementos del formulario. Ejemplos de tales pistas contextuales incluyen la name de un elemento de entrada, el texto que rodea al elemento y cualquier texto de marcador de posición.

Recientemente, sin embargo, el equipo de Chrome reconoció que esta es una solución insatisfactoria, y han comenzado a presionar por la estandarización en este asunto. Una publicación muy informativa del grupo de webmasters de Google discutió recientemente este tema, explicando:

Desafortunadamente, hasta ahora ha sido difícil para los webmasters asegurarse de que Chrome y otros proveedores de llenado de formularios puedan analizar su formulario correctamente. Existen algunos estándares; pero imponen cargas onerosas en la implementación del sitio web, por lo que no se usan mucho en la práctica.

(Los “estándares” a los que se refieren son una versión más reciente de la especificación mencionada en la respuesta de Avalanchis anterior).

La publicación de Google continúa describiendo la solución propuesta (que recibe críticas importantes en los comentarios de la publicación). Proponen el uso de un nuevo attribute para este propósito:

Solo agrega un attribute al elemento de entrada, por ejemplo, un campo de dirección de correo electrónico podría verse así:

…donde el x- significa “experimental” y se eliminará cuando se convierta en un estándar. Lea la publicación para obtener más detalles, o si desea profundizar, encontrará una explicación más completa de la propuesta en la wiki de whatwg.

---

ACTUALIZAR:
Como se señala en estas interesantes respuestas, todas las expresiones regulares que utiliza Chrome para identificar / reconocer campos comunes se pueden encontrar en autofill_regex_constants.cc.utf8. Entonces, para responder a la pregunta original, solo asegúrese de que los nombres de sus campos html coincidan con estas expresiones. Algunos ejemplos incluyen:

• primer nombre:"first.*name|initials|fname|first$"
• apellido:"last.*name|lname|surname|last$|secondname|family.*name"
• Email:"e.?mail"
• Dirección Línea 1):"address.*line|address1|addr1|street"
• código postal:"zip|postal|post.*code|pcode|^1z$"

Esta pregunta es bastante antigua, pero tengo una respuesta actualizada!

Aquí hay un enlace a la documentación de WHATWG para habilitar el autocompletado.

Google escribió una guía bastante buena para desarrollar aplicaciones web que sean amigables para dispositivos móviles. Tienen una sección sobre cómo nombrar las entradas en los formularios para usar el autocompletar fácilmente. Aunque está escrito para dispositivos móviles, ¡esto se aplica tanto para computadoras de escritorio como para dispositivos móviles!

Cómo habilitar Autocompletar en sus formularios HTML

Aquí están algunas key puntos sobre cómo habilitar el autocompletado:

• Utilizar una por todo tu los campos
• Agrega un autocomplete attribute para usted etiquetas y rellénelo usando esta guía.
• Nombra tu name y autocomplete attributes correctamente para todos etiquetas

• Ejemplo:

  Name
  
  
  Email
  [email protected]" required autocomplete="email">
  
  
  Confirm Email
  [email protected]" required autocomplete="email">
  
  Phone
  
  

Cómo nombrar tu etiquetas

Para activar el autocompletado, asegúrese de nombrar correctamente el name y autocomplete attributes en tus etiquetas. Esto permitirá automáticamente el autocompletado en formularios. Asegúrate también de tener un ! Esta información también se puede encontrar aquí.

A continuación, le indicamos cómo nombrar sus entradas:

• Nombre
  • Utilice cualquiera de estos para name: name fname mname lname
  • Utilice cualquiera de estos para autocomplete:
    • name (para el nombre completo)
    • given-name (por nombre)
    • additional-name (para el segundo nombre)
    • family-name (por apellido)
  • Ejemplo:
• Correo electrónico
  • Utilice cualquiera de estos para name: email
  • Utilice cualquiera de estos para autocomplete: email
  • Ejemplo:
• Dirección
  • Utilice cualquiera de estos para name: address city region province state zip zip2 postal country
  • Utilice cualquiera de estos para autocomplete:
    • Para una entrada de dirección:
      • street-address
    • Para dos entradas de dirección:
      • address-line1
      • address-line2
    • address-level1 (Estado o Provincia)
    • address-level2 (ciudad)
    • postal-code (código postal)
    • country
• Teléfono
  • Utilice cualquiera de estos para name: phone mobile country-code area-code exchange suffix ext
  • Utilice cualquiera de estos para autocomplete: tel
• Tarjeta de crédito
  • Utilice cualquiera de estos para name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Utilice cualquiera de estos para autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Nombres de usuario
  • Utilice cualquiera de estos para name: username
  • Utilice cualquiera de estos para autocomplete: username
• Contraseñas
  • Utilice cualquiera de estos para name: password
  • Utilice cualquiera de estos para autocomplete:
    • current-password (para formularios de inicio de sesión)
    • new-password (para formularios de registro y cambio de contraseña)

Recursos

• Estándar HTML WHATWG actual para autocompletar.
• “Crear formularios asombrosos” de Google. Parece que se actualiza casi a diario. Excelente lectura.
• “Ayude a los usuarios a realizar el pago más rápido con Autocompletar” de Google en 2015.

De mis pruebas, el x-autocomplete la etiqueta no hace nada. En su lugar use autocomplete etiquetas en sus etiquetas de entrada y establezca sus valores de acuerdo con la especificación HTML aquí http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html# campo de autocompletar.

Ejemplo:

La etiqueta del formulario principal necesita autocomplete = “on” y method = “POST”.

Puntuaciones y reseñas

Si posees alguna incertidumbre o disposición de aumentar nuestro noticia puedes realizar una explicación y con deseo lo observaremos.

---

---

Utiliza Nuestro Buscador