Ir al contenido principal

Como desactivar el autocomplete en input de formularios HTML

Como desactivar el autocomplete en input de formularios HTML

Fecha de publicación: 19 de Diciembre del 2021


Índice

Consideraciones preliminares

Es importante conocer el hecho de que el auto-completado de inputs en formularios, tiene como objetivo facilitar la interacción del cliente, con la plataforma.

Al igual que no depende de la página en cuestión, sino que es dependiente del navegador, la cuenta de acceso al navegador, si ha ingresado en dicha cuenta, y si tiene datos de auto-completar activados, y/o archivados.

Aclarado esto, las sugerencias no se desactivan, se eliminan en el navegador, en la cuenta del usuario, y similares. Pero no dependen del código de la página.

Introducción

Todo comenzó cuando estaba realizando un formulario muy estilizado que inicialmente ubica la label, etiqueta, titulo, o descripción del campo, en el lugar donde va el contenido del input.

Al tomar foco o tener contenido, desplaza la label arriba del input, como muestra la imagen anterior a la derecha.

Como tengo en mi cuenta activa en el navegador, la función de auto completar, pone contenido en los campos que se sobreponen con los títulos de cada input, como muestra la imagen anterior a la izquierda, esto es antiestético.

Así que comencé a investigar, algo que ya estaba definido, pero que ha cambiado.

Con definido me refiero a lo que primero encontré y que ya no funciona como antes, que es poner en el formulario el atributo:

autocomplete="off"

Al parecer este atributo (segun este artículo. Digo al parecer ya que no he realizado pruebas aún ):

  • Impide que el navegador guarde los datos de los campos para un posterior autocompletado en formularios similares mediante heurísticas que varían según el navegador.
  • Evita que el navegador almacene en caché los datos del formulario en el historial de la sesión. Cuando los datos del formulario están almacenados en la caché del historial de la sesión, la información completada por el usuario será visible en caso de que el usuario haya enviado el formulario y haya hecho clic en el botón Atrás para volver a la página original del formulario.

Luego estaba la alternativa de poner en los inputs el atributo:

autocomplete="off"
autocomplete="none"
Pero ninguno me funciono (No para lo que necesitaba, que era evitar la carga automatica de autocompletado).

Solución HTML
Después de investigar un rato me encontré la solución aquí, la cual es agregar a los inputs el atributo:

autocomplete="new-password"
En mi caso tengo confirmación de contraseña, y me salía el siguiente error:


La solución era colocar el atributo (autocomplete="new-password") en este campo también.
La siguiente imagen muestra el resultado al cargar la página, después del cambio:

(autocomplete="new-password")

Me parece muy importante tener en cuenta que las sugerencias seguirán apareciendo en campos de inicio de sesión, e incluso en otros, cuando estemos sobre el input, o hacemos focus en el.

Lo que se evita con el atributo:
autocomplete="new-password"
Es que rellene con la sugerencia un campo al cargar la página.
Sin embargo al posicionarnos sobre el input, que es lo mismo que hacer focus en el input.
Este nos ofrecera sugerencias de haberlas almacenado.

Como explique anteriormente estas sugerencias no dependen del código de la página, dependen del navegador, la cuenta de usuario en el navegador, las preferencias o configuraciones del navegador, y la existencia de datos para autocompletar, en la configuración o ajustes, según el navegador.

Otra Solución HTML

Si lo que quieres es evitar tanto el auto completar automatico, explicado ya.
Y las sugerencias, la solución HTML, es simple:
En lugar de un campo input, utilizamos un campo textarea así:
<textarea style="resize:none;" type="email" id="correo" name="correo"></textarea>
Los atributos type, id y name aunque opcionales, según el objetivo, y manejo se declaran o no.

Solución HTML con JS

Y como nunca se sabe hasta cuando funciones el nuevo atributo.
autocomplete="new-password"
Dentro de lo investigado, encontre la forma de obtener el mismo resultado aquí.
Estos son los ejemplos para los inputs:
  <input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
                    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

  <input id="pw" readonly type="password" onfocus="if (this.hasAttribute('readonly')) {
                    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Equipo lento? Solicita Mantenimiento remoto por WhatsApp.

Patrocinado por: CompuLG
Venta, Mantenimiento y Reparación de Computadores. - Macros a la medida - Diseño Web - Elaboración y/o Presentación de Información Exógena
O desde el celular presiona WhatsApp y envía tu mensaje
Solo en celulares WhatsApp 315-438 3999

Etiquetas:

Comentarios

Publicar un comentario