 |
Eventos keypress, keydown y keyup (DOM)
Eventos keypress, keydown y keyup (DOM)
El evento keypress se dispara cuando pulsamos y soltamos luego una tecla, el evento keydown se activa cuando se pulsa la tecla, el evento keyup se activa cuando una tecla que se encuentra presionada se deja de pulsar.
Confeccionaremos una página que solicite un nombre de usuario el cual no puede tener el espacio en blanco. En caso que el operador ingrese dicho caracter mostraremos un mensaje y no agregaremos dicho caracter.
pagina.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('usuario');
ob.addEventListener('keypress',presionTecla,false);
}
function presionTecla(e)
{
var tecla=e.which;
if(tecla==32)
{
e.preventDefault();
alert('No se puede ingresar espacios en blanco para un nombre de usuario');
}
}
</script>
</head>
<body>
<form action="" method="post">
Nombre de usuario:<input type="text" id="usuario" size="20">
</form>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('usuario');
ob.addEventListener('keypress',presionTecla,false);
}
function presionTecla(e)
{
var tecla=e.which;
if(tecla==32)
{
e.preventDefault();
alert('No se puede ingresar espacios en blanco para un nombre de usuario');
}
}
La función presionTecla extrae la tecla presionada y en el caso que sea el 32 (espacio en blanco) procedemos a mostrar un mensaje y a cancelar la acción por defecto que es agregar el caracter de espacio en blanco dentro del control:
function presionTecla(e)
{
var tecla=e.which;
if(tecla==32)
{
e.preventDefault();
alert('No se puede ingresar espacios en blanco para un nombre de usuario');
}
}