How to disable autocomplete in web forms?
I have a form that has different fields. Once it has been submitted, when the user returns to the page, the browser "remembers" the values entered and autocompletes the fields.
How can you disable that field autocompletion in a form?Is there a solution cross-browser that works in major browsers?
4 answers
Changes to form
Note: until a while ago browsers behaved this way when the autocomplete="off" attribute was added to the form, but no longer as of IE11, Chrome 34, and Firefox 30.
Modification 1: we add to the form the attribute autocomplete=”off”. Although it is not essential to do so, in versions of browsers prior to those indicated it is contemplated.
In this example you disable auto-complete in all fields.
If you want to enable auto completed in a specific field, you can do so by adding the autocomplete="on" attribute to any field.
<form action="#" method="post" autocomplete="off">
Email: <input type="text" name="email">
Nombre: <input type="text" name="nombre">
<input type="submit" value="enviar">
</form>
Can also be applied to a specific field:
<input type="text" name="email" autocomplete="off">
Modification 2: we change the type of input submit to button. This is what prevents most browsers from proposing to remember.
Changes to the code javascript
Example login form.
Modification 3: we set the login_button as the element to observe and the click event (instead of the Submit of the login_form element):
Event.observe( 'login_button', 'click', formProcess);
Modification 4: we add to the end of the function formProcess the action of submit of the form
$('login_form').submit();
We add the attribute onkeypress in each by invoking a new function checkEnter, which when detecting that Enter was pressed invokes the form processing function:
Email: <input type="text" name="e" id="email" onkeypress="checkEnter(event)" /><br />
Password: <input type="password" name="p" id="password" onkeypress="checkEnter(event)" /><br />
Complete example form 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>
Form
<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>
Two examples of how to disable autocomplete in forms.
I normally do this with the autocomplete property on off, at the beginning of the form, so as not to have to apply it to each of the fields of the same:
<form method="post" action="/enviar" autocomplete="off">
Can also be applied to a specific field:
<input type="text" autocomplete="off">
Some documentation in MDN .
According to caniuse.com works in virtually all modern browsers.
With the autocomplete attribute of the form tag. Which is supported by most of the most used browsers on the 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>
For more information about this, click here .
Nothing that has been said works or I can't get it to work in my case I use jquery and have opted for the raw solution. Enter two password fields that remove the Chrome autocomplete function
I have my password field and after it I put a div (autocompleteOff) and inside a password field with no name, id, nor value
When loading the hidden div that div has the password field
<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>