Detectar tecla pulsada - FAQ 63

AnDrEa MM · #1 (**permalink**) 23/04/2006, 15:29

He adaptado el siguiente código de la FAQ 63:

Código:

<html>
<script>
function mostrar(caracter) {
esNetscape=(document.layers);
letra = (esNetscape) ? caracter.which : event.keyCode;
l = String.fromCharCode(letra)
alert("Usted presionó la letra: "+l+" Codigo: "+letra) 
}
document.onkeypress = mostrar;
</script>
<body>
Pulsa una tecla.
</body>
</html>

Lo uso en un formulario en el q no quiero q se inserten ciertos caracteres. Lo q hago es q, cuando se pulse alguno de ellos, se muestre un mensaje de alerta q informe al usuario q ese caracter es incorrecto. Con este código, consigo q me reconozca los caracteres y muestre el mensaje correctamente, pero el caracter queda introducido. ¿Hay alguna forma de desahcer la última acción de escritura o algo por el estilo con JavaScript? O podría saber dónde está el caracter inválido introducido y eliminarlo?
Muchas gracias.

Cap.Buscapina · #2 (**permalink**) 23/04/2006, 16:44

Cita:

<html>
<head>
<script>
function mostrar(caracter) {
esNetscape=(document.layers);
letra = (esNetscape) ? caracter.which : caracter.keyCode;
if(String.fromCharCode(letra)=="a" || String.fromCharCode(letra)=="b"){
alert(" no debes precionar las teclas a o b");
return false;
}else{
return true;
}
}
</script></head>

<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield" onKeyPress=" return mostrar(event)">No deja precionar la tecla a y b
</form>
</body>
</html>

Siguiendo con tu ejemplo, la clave para "anular" la tecla precionada es utilizar "return" al llamar ala funcion y que esta última de como resultado "true" o "false" dependiendo de la situación.

Pero tambien tengo que decirte, que en mi opinión, lo correcto sería hacer la validación con expreciones regulares (sobre todo si son varios caracteres). En las FAQ hay algunos ejemplos.

saludos

AnDrEa MM · #3 (**permalink**) 24/04/2006, 01:40

Muchas gracias Cap.Buscapina! Los caracteres q no quiero q sean insertados son sólo dos: el * y la | . Y no sé si para este caso puedo usar expresiones regulares... La verdad casi ni sé lo q son, he visto ejemplos por ejemplo para validar números, por eso creo q en este caso no sé si se podría aplicar alguna norma... De todas formas voy a buscar por las FAQ a ver si sé hacer algo.
Un saludo, AnDrEa

JavierB · #4 (**permalink**) 24/04/2006, 02:13

Hola AnDrEa MM

Modificando un poco una de las FAQs quedaría esto. Pruebalo a ver si te sirve:

Código:

<html>
<head>
<script>
function validar(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true;
    patron =/[\*\|]/; // Solo acepta letras
    te = String.fromCharCode(tecla);
    return !patron.test(te); 
} 
</script>
</head>

<body>
<input type="text" name="textfield" onkeypress="return validar(event)">
</body>
</html>

Saludos,

AnDrEa MM · #5 (**permalink**) 24/04/2006, 02:20

Voy a probarlo!! Gracias.

AnDrEa MM · #6 (**permalink**) 24/04/2006, 02:40

Muchas gracias Javier, la función va perfecta pero sigo teniendo una duda q no sé cómo solucionar.
Si llamo a la función de la forma q me has indicado funciona OK, no permite introducir los dos caracteres (* y |), pero quiero q se llame a la función siempre q se pulse una tecla (esos dos caracteres los uso como separadores de una cadena en la q recogo los valores de un formulario, y si se introduce ese caracter se descompone todo... sería un caos!! Por eso necesito q no se introduzca en ninguna parte de la aplicación.
Usando el comando 'document.onkeypress' en JS me dice q 'event' no está definido, así q supongo q debería usar ese evento una vez iniciado el código HTML... puede ser? He pensado ponerlo en la etiqueta body, pero no tiene el evento onKeyPress, así q no sé dónde ni cómo ponerlo.

Cap.Buscapina · #7 (**permalink**) 24/04/2006, 09:42

Cita:

Iniciado por AnDrEa MM

Usando el comando 'document.onkeypress' en JS me dice q 'event' no está definido, así q supongo q debería usar ese evento una vez iniciado el código HTML... puede ser? He pensado ponerlo en la etiqueta body, pero no tiene el evento onKeyPress, así q no sé dónde ni cómo ponerlo.

para esto tenes que cambiar esta linea:

Cita:

tecla = (document.all) ? event.keyCode : event.which;

Cita:

Iniciado por AnDrEa MM

..esos dos caracteres los uso como separadores de una cadena en la q recogo los valores de un formulario, y si se introduce ese caracter se descompone todo... sería un caos!! Por eso necesito q no se introduzca en ninguna parte de la aplicación.

Desde mi punto de vista , dos opcines mas simples:

1.- Utilizando esa misma funcion, poner el onkeypress en cada elemento del formulario que lo requiera

2.- Utilizar una funcion que te valide todos los campos (eliminando esos caracteres) en el momento de enviar el formulario llamandola con onsubmit="return validar()".
algo así:

Cita:

<html>
<head>
<script>
function validar(f){
var patron =/[\*\|]+/;
for(x=0;x<f.elements.length;x++){
f.elements[x].value=f.elements[x].value.replace(patron,"");
if (f.elements[x].value.length==0){
alert(x);
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="get" action="" onsubmit="return validar(this)">
<input type="text" name="textfield">
<textarea name="textarea"></textarea>
<input type="text" name="textfield2">
<input name="s" type="submit" value="enviar">
</form>
</body>
</html>

espero te sirva.

saludos

PD: Acordate de que si utilizas lenguaje del lado del servidor es imprescindible validarlo allí. (javascript no es suficiente para validaciones importantes)

icebeam · #8 (**permalink**) 25/04/2006, 00:19

También puedes hacer el llamado de la función utilizando el evento onKeyUp del formulario. Y como dice Cap.Buscapina, debes hacer la validación al hacer submit en un script de php que no se haya escapado algun campo con los caracteres que no deseas.

Saludos