2

Tengo un formulario que tiene diferentes campos. Una vez que se ha enviado, cuando el usuario vuelve a la página, el navegador "recuerda" los valores introducidos y autocompleta los campos.

¿Cómo se puede deshabilitar ese autocompletado de campos en un formulario?¿Existe alguna solución cross-browser que funcione en los principales navegadores?

4 respuestas 4

6

Modificaciones sobre el formulario

Nota: Hasta hace un tiempo los navegadores se comportaban de esta manera cuando se agregaba el atributo autocomplete=”off” al formulario, pero ya no más a partir de IE11, Chrome 34 y Firefox 30.

Modificación 1: agregamos al formulario el atributo autocomplete=”off”. Aunque no es esencial hacerlo, en versiones de los navegadores previas a las indicadas se contempla.

En este ejemplo deshabilitas el auto completado automático en todos los campos.

Si deseas habilitar el auto completado en un campo específico lo puedes hacer añadiendo el atributo autocomplete="on" al cualquier campo.

<form action="#" method="post" autocomplete="off">

Email: <input type="text" name="email">

Nombre: <input type="text" name="nombre">

<input type="submit" value="enviar">

</form>

También se puede aplicar a un campo específico:

<input type="text" name="email" autocomplete="off">

Modificación 2: cambiamos el tipo de input submit por button. Esto es lo que evita que la mayoría de los navegadores proponga recordar.

Modificaciones sobre el código javascript

Ejemplo formulario de login.

Modificación 3: establecemos el login_button como elemento a observar y el evento click (en lugar del submit del elemento login_form):

Event.observe( 'login_button', 'click', formProcess);

Modificación 4: agregamos al final de la función formProcess la acción de submit del formulario

$('login_form').submit();

Agregamos el atributo onkeypress en cada uno invocando a una nueva función checkEnter, la cual al detectar que se presionó Enter invoca la función de procesamiento del formulario:

Email: <input type="text" name="e" id="email" onkeypress="checkEnter(event)" /><br />
Password: <input type="password" name="p" id="password" onkeypress="checkEnter(event)" /><br />

Formulario completo del ejemplo javascript

javascript

<script type="text/javascript">
  Event.observe(window, 'load', function(){
    Event.observe( 'login_button', 'click', formProcess);
  });
  function formProcess(){
    //agregar validaciones
    $('secret').value = hex_sha512($('password').value);
    $('password').value = '';
    $('login_form').submit();
  }
  function checkEnter(e){
    var codigoCaracter = (e && e.which) ? e.which : event.keyCode;
    if(codigoCaracter == 13) {
      formProcess();
    }
    else {
      return true;
    }
  }
</script>

Formulario

<form action="index.cgi" autocomplete="off" method="post" id="login_form" name="login_form">
  Email: <input type="text" name="e" id="email" onkeypress="checkEnter(event)" /><br />
  Password: <input type="password" name="p" id="password" onkeypress="checkEnter(event)" /><br />
  <input type="hidden" name="ps" id="secret">
  <input type="button" value="Login" id="login_button" />
</form>

Dos ejemplos de como deshabilitar autocompletado en formularios.

2

Normalmente lo hago con la propiedad autocomplete en off, al inicio del formulario, para no tener que aplicarlo a cada uno de los campos del mismo:

<form method="post" action="/enviar" autocomplete="off">

También se puede aplicar a un campo específico:

<input type="text" autocomplete="off">

Algo de documentación en MDN.

Según caniuse.com funciona en prácticamente todos los navegadores modernos.

4
  • Esto parece funcionar, pero no en todos los navegadores o con todos los formularios. Algunos navegadores parecen dar precedencia a los datos guardados (p.e. logins) que al autocomplete="off"
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 11:42
  • En cuáles navegadores tienes ese problema?
    – Shaz
    Commented el 23 ago. 2016 a las 17:37
  • @Shaz quiza en internet explorer, porque todos los navegadores chrome,opera,mozilla,safari lo soporta
    – simon
    Commented el 27 jul. 2018 a las 10:34
  • caniuse.com/#search=autocomplete
    – simon
    Commented el 27 jul. 2018 a las 10:40
2

Con el atributo autocomplete de la etiqueta form. El cual es soportado por la mayoría de los navegadores más usados en Internet.

<form action="#" method="post" autocomplete="off">
    Nombre:<input type="text" name="fname"><br>
    Correo: <input type="email" name="email"><br>
  <input type="submit">
</form> 

Para más información acerca de esto, clic aquí.

1
  • Esto parece funcionar, pero no en todos los navegadores o con todos los formularios. Algunos navegadores parecen dar precedencia a los datos guardados (p.e. logins) que al autocomplete="off"
    – Alvaro Montoro
    Commented el 23 ago. 2016 a las 11:42
0

no funciona nada de lo que se ha dicho o no lo logro hacer funcionar en mi caso uso jquery y he optado por la solución bruta. Meter dos campos de password que elimien la función de autocompletado de chrome

tengo mi campo de contraseña y después de él meto un div (autocompleteOff) y dentro un campo de password sin nombre, id, ni valor

al cargar el div oculto ese div que tiene el campo de password

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <input type="password" class="form-control" name="nuevoPasswword" id="nuevoPasswword" placeholder="Ingresar Contraseña" autocomplete="OFF">
    			
    				   
    	      
    		   
    		      <div id="autocompleteOff" class="autocompleteOff" style=" background: #A45F60">
             este es el div en el que tengo el campo password que oculto al cargar el div
    		      	<input type="password" autocomplete="OFF">
    		      </div>




     
<script>
  	$('.autocompleteOff').ready(function() {
        		//quita este alert, es para testar que funciona
            alert( "alerta para que mires que el campo adicional aparece" );
        		$("#nuevoPasswword").val("");
    			$('#autocompleteOff').hide();
    	   	});

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.