remove password off new funciona disable desactivar chrome autocompletar html google-chrome autofill

html - password - disable autocomplete javascript



¿Cómo desencadenar Autocompletar en Google Chrome? (9)

Me gustaría saber si existe 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 desactivarlo, 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).

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

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

Google escribió una guía bastante buena para desarrollar aplicaciones web 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 aplica tanto para computadoras de escritorio como para dispositivos móviles!

Cómo habilitar Autocompletar en sus formularios HTML

Estos son algunos puntos clave sobre cómo habilitar la función de autocompletar:

  • Use una <label> para todos sus campos <input>
  • Agregue un atributo de autocomplete a sus etiquetas <input> y complételo usando esta guía .
  • Nombre su name y autocomplete atributos correctamente para todas las etiquetas <input>

  • 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 sus etiquetas <input>

Para disparar la función de autocompletar, asegúrese de nombrar correctamente el name y los atributos de autocomplete en sus etiquetas <input> . Esto permitirá automáticamente la autocompletar en formularios. ¡Asegúrate también de tener una <label> ! Esta información también se puede encontrar aquí .

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

  • Nombre
    • Use cualquiera de estos para el 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 (para apellido)
    • Ejemplo: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Use cualquiera de estos para el name : email
    • Use cualquiera de estos para autocomplete : email
    • Ejemplo: <input type="text" name="email" autocomplete="email">
  • Dirección
    • Utilice cualquiera de estos para el 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
    • Utilice cualquiera de estos para el name : phone mobile country-code area-code exchange suffix ext
    • Usa cualquiera de estos para autocomplete : tel
  • Tarjeta de crédito
    • Use cualquiera de estos para el 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
    • Usa cualquiera de estos para el name : name username
    • Use cualquiera de estos para autocomplete : username
  • Contraseñas
    • Use cualquiera de estos para el 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

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 la dirección de autocompletar de Chrome de escritorio está por dirección.

Aquí está la nueva lista de "nombres" de Google Autofill. Hay todos los nombres compatibles en cualquier lenguaje permitido.

autofill_regex_constants.cc

Aquí está la verdadera respuesta:

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 envoltorio de formulario;
  • A <label for="id_of_field">Name</label>
  • Un <input id="id_of_field"></input>

Nada mas.

De mi prueba, la etiqueta x-autocomplete no hace nada. En su lugar, use etiquetas de autocomplete en sus etiquetas de entrada y establezca sus valores de acuerdo con las especificaciones de 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".

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

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

nuevas informaciones por 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

ACTUALIZACIÓN para 2017: Parece que la respuesta de Kayvar tiene más información actualizada que la mía. Lectores futuros: dé su voto favorable a esa respuesta .

Esta es una gran pregunta y para la cual la documentación es sorprendentemente difícil de conseguir. De hecho, 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 completa 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 es insatisfactoria, ya que deja la solución en el reino de la "magia". Profundizando más me enteré de que Chrome (y otros navegadores habilitados para autocompletar) dependen principalmente de pistas contextuales para determinar el tipo de datos que se deben completar en los elementos del formulario. Ejemplos de tales pistas contextuales incluyen el name de 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 para la estandarización en este asunto. Una publicación muy informativa del grupo de Google Webmasters discutió recientemente este tema, explicando:

Lamentablemente, hasta ahora ha sido difícil para los webmasters asegurarse de que Chrome y otros proveedores de formularios puedan analizar correctamente su formulario. Algunos estándares existen; pero le imponen cargas onerosas a 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 su solución propuesta (que se enfrenta a 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 y 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 .

ACTUALIZACIÓN: como se señala en estas answers insightful , 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"
  • correo electrónico: "e.?mail"
  • dirección (línea 1): "address.*line|address1|addr1|street"
  • código postal: "zip|postal|post.*code|pcode|^1z$"