Al ingresar los datos de acceso en un sitio, el navegador propondrá almacenarlos excepto cuando se haya desactivado el guardado de contraseñas. En la mayoría de los casos es el comportamiento deseado, dado que el usuario puede decidir si quiere o no hacerlo.
Existen contadas ocasiones donde sería bueno que el sitio pudiera indicar al navegador que no realice esta esta propuesta (por ejemplo, el sitio web de un banco). Al momento de escribir esta publicación, no hay una forma simple. 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.
Igualmente, la seguridad en el acceso debería pasar por otro lado y no por evitar que el navegador recuerde la clave. El usuario puede tener otras aplicaciones o plugins del navegador donde se almacenen, hasta puede tenerlas anotadas en un papel.
Lo que les propongo es un formulario de login que NO fomenta al navegador a solicitar recordar el usuario y la clave, compatible con casi todas las versiones de Firefox, Chrome e Internet Explorer que pude probar. Tengan en cuenta que podría funcionar hasta que cambien las reglas nuevamente.
Tomaremos como base el formulario de login seguro que fomenta el recordar datos de acceso, al cual le realizaremos una serie de modificaciones:
Modificaciones sobre el formulario
Modificación 1: cambiamos el tipo de input submit por button. Esto es lo que evita que la mayoría de los navegadores proponga recordar la clave.
Modificación 2: agregamos al formulario el atributo autocomplete=»off». Aunque no es esencial hacerlo, en versiones de los navegadores previas a las indicadas se contempla.
<form action="index.cgi" autocomplete="off" method="post" id="login_form" name="login_form"> Email: <input type="text" name="e" id="email" /><br /> Password: <input type="password" name="p" id="password" /><br /> <input type="hidden" name="ps" id="secret"> <input type="button" value="Login" id="login_button" /> </form>
OBS: en el atributo action del formulario se indica el script que procesará los datos ingresados, en este caso index.cgi pero podría ser cualquiera.
Modificaciones sobre el código javascript
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: agregaamos al final de la función formProcess la acción de submit del formulario
$('login_form').submit();
Un detalle de color: podemos darle el toque final capturando el Enter en los campos del formulario para procesarlo (esto se hace automáticamente cuando está presente el input 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 />
function checkEnter(e){
var codigoCaracter = (e && e.which) ? e.which : event.keyCode;
if(codigoCaracter == 13) {
formProcess();
}
else {
return true;
}
}
Formulario completo
A continuación les dejo el código del formulario completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Site</title>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<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>
</head>
<body>
<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>
</body>
</html>
Esas cosas que aprendo 