¿Cómo activar Autocompletar en Google Chrome?

191

Me gustaría saber si hay algún tipo de marcado especial para habilitar la función de autocompletar de Chrome para un formulario específico. Solo encontré preguntas sobre cómo deshabilitarlo, pero me gustaría saber si puedo agregar algún tipo de marcado al código html para decirle al navegador "esta es la entrada para la dirección" o "este es el código postal campo "para completarlo correctamente (se supone que el usuario activó esta función).

html google-chrome autofill Riesling
fuente

Respuestas:

182

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

Esta es una gran pregunta y para la cual la documentación es sorprendentemente difícil de encontrar. En realidad, en muchos casos encontrará que la funcionalidad de 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:

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

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. Los ejemplos de tales pistas contextuales incluyen el namede un elemento de entrada, el texto que rodea el 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 Google Webmasters recientemente discutió este problema, 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 algunas normas; 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 es 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 su solución propuesta (que se encuentra con críticas significativas en los comentarios de la publicación). Proponen el uso de un nuevo atributo para este propósito:

Simplemente agregue un atributo al elemento de entrada, por ejemplo, un campo de dirección de correo electrónico podría verse así:

<input type=”text” name=”field1” x-autocompletetype=”email” />

... donde x-significa "experimental" y se eliminará si esto se convierte 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 el wiki de whatwg .

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

  • nombre de pila: "first.*name|initials|fname|first$"
  • apellido: "last.*name|lname|surname|last$|secondname|family.*name"
  • correo electrónico: "e.?mail"
  • Dirección Línea 1): "address.*line|address1|addr1|street"
  • código postal: "zip|postal|post.*code|pcode|^1z$"
kmote
fuente
3
Además, debe enviar una etiqueta <form> completa con "acción" y "método"
qualle
Si bien esto posiblemente solía ser relevante a partir de mis pruebas, solo los métodos que describí a continuación realmente funcionan.
Micah
Supongo que las constantes regex de autocompletar no es lo único que usa, sino que también recuerda cosas de entradas personalizadas con nombre.
CloudMeta
1
Usé la url en esta respuesta y estaba rota. Esto funciona ahora: code.google.com/p/chromium/codesearch#chromium/src/components/…
Nathan
2
URL que @Nathan proporcionó ya no funciona: aquí está la actual, hasta que la cambien nuevamente :) cs.chromium.org/chromium/src/components/autofill/core/common/…
HungryBeagle
85

¡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 fácilmente el autocompletado. A pesar de que está escrito para dispositivos móviles, esto se aplica tanto para escritorio como para dispositivos móviles.

Cómo habilitar Autocompletar en sus formularios HTML

Aquí hay algunos puntos clave sobre cómo habilitar el autocompletado:

  • Use a <label>para todos sus <input>campos
  • Agregue un autocompleteatributo a sus <input>etiquetas y complételo con esta guía .
  • Nombre sus atributos namey autocompletecorrectamente para todas las <input>etiquetas

  • Ejemplo :

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

Cómo nombrar tus <input>etiquetas

Para activar el autocompletado, asegúrese de nombrar correctamente los atributos namey autocompleteen sus <input>etiquetas. Esto permitirá automáticamente el autocompletado en formularios. ¡Asegúrate también de tener un <label>! Esta información también se puede encontrar aquí. .

Aquí le mostramos cómo nombrar sus entradas:

  • Nombre
    • Use cualquiera de estos para name:name fname mname lname
    • Use cualquiera de estos para autocomplete:
      • name (para nombre completo)
      • given-name (para el primer nombre)
      • additional-name (para el segundo nombre)
      • family-name (por apellido)
    • Ejemplo: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Use cualquiera de estos para name:email
    • Use cualquiera de estos para autocomplete:email
    • Ejemplo: <input type="text" name="email" autocomplete="email">
  • Habla a
    • Use cualquiera de estos para name:address city region province state zip zip2 postal country
    • Use 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
    • Use cualquiera de estos para name:phone mobile country-code area-code exchange suffix ext
    • Use cualquiera de estos para autocomplete:tel
  • Tarjeta de crédito
    • Use cualquiera de estos para name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Use cualquiera de estos para autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Nombres de usuario
    • Use cualquiera de estos para name:username
    • Use cualquiera de estos para autocomplete:username
  • Contraseñas
    • Use cualquiera de estos para name:password
    • Use 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

Katie
fuente
39

De mis pruebas, la x-autocompleteetiqueta no hace nada. En su lugar, use autocompleteetiquetas en sus etiquetas de entrada y establezca sus valores de acuerdo con las especificaciones HTML aquí http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # autofill-field .

Ejemplo:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

La etiqueta de formulario principal necesita autocompletar = "on" y method = "POST".

Micah
fuente
2
¿En qué navegadores se implementa esta especificación? ¿Alguna experiencia / prueba realizada todavía?
staabm
La especificación W3C establece que el autocompletado solo debe conteneron , offo default. Por lo tanto, este marcado no es válido y será propenso a inconsistencias. De hecho, creo que la ubicación en el atributo de autocompletar es irrelevante. Supongo que analiza todos los atributos y el autocompletado es uno de los que verifica.
Liam
1
Este es HTML correcto, consulte las especificaciones WHATWG y la publicación de Google .
AlecRust
4

Acabo de jugar con la especificación y obtuve un buen ejemplo de trabajo, incluidos algunos campos más.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

Contiene 2 áreas de direcciones separadas y también diferentes tipos de direcciones. También lo probé en iOS 8.1.0 y parece que siempre llena todos los campos a la vez, mientras que el escritorio automático de Chrome completa la dirección por dirección.

staabm
fuente
1
No estoy seguro de por qué esta respuesta recibe votos negativos. El ejemplo anterior todavía funciona para mí usando los navegadores descritos
staabm el
1
El autocompletado que se muestra en los ejemplos anteriores es de aquí: html.spec.whatwg.org/multipage/forms.html#autofill
Bryan Rehbein
2

Parece que tendremos más control sobre esta función de autocompletar, hay una nueva API experimental que llega a Chrome Canary, que se puede usar para acceder a los datos después de solicitarla al usuario:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

nueva información de google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Riesling
fuente
0

Aquí está la respuesta real:

La única diferencia está en la etiqueta misma. El "Nom" viene de "Nombre" o "Nome" en portugués.

Entonces, esto es lo que necesitas:

  • Un contenedor de formularios;
  • UNA <label for="id_of_field">Name</label>
  • Un <input id="id_of_field"></input>

Nada mas.

Totty.js
fuente
También descubrí que la etiqueta también puede activar el autocompletado de cromos.
emfi
Entonces, ¿su punto es que el nombre de la etiqueta también se usa al calcular los campos de autocompletar? Esta respuesta no es muy clara
Liam
En realidad, Nom es del francés. Pero lo hice funcionar sin una etiqueta, un marcador de posición para la entrada con el valor correcto también funciona.
AxelH
0

Aquí está la nueva lista de "nombres" de Autocompletar de Google. Existen todos los nombres admitidos en cualquier idioma permitido.

autofill_regex_constants.cc

Alvargon
fuente
0

Google ahora proporciona documentación para esto:

Ayuda a los usuarios a pagar más rápido con Autocompletar | Web | Desarrolladores de Google

y

Cree formas asombrosas: use metadatos para habilitar el autocompletado | Web | Desarrolladores de Google

henry
fuente
Las respuestas con solo enlaces se vuelven inútiles si estos enlaces caen, como el primero en esa respuesta.
bfontaine
Es cierto, pero es por eso que la respuesta es un wiki comunitario: alentar a otros a contribuir. Además, votar en contra de una wiki comunitaria no afecta al autor, solo sirve para enterrar la documentación de Google. ¡No dude en actualizar una respuesta wiki de la comunidad, especialmente si es algo tan simple como actualizar un enlace!
Henry
-3

En mi caso, $('#EmailAddress').attr('autocomplete', 'off');no se trabaja. Pero los siguientes trabajos en Chrome Versión 67 por jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
reza.cse08
fuente