 |
Eventos de teclado (keydown, keyup y keypress)
El evento keydown se dispara cuando presionamos cualquier tecla del teclado, el evento keyup cuando soltamos una tecla. En cuanto el evento keypress en un principio procesa tanto cuando se la presionó y soltó, el único y gran inconveniente es que la mayoría de los navegadores no dispara el evento keypress para todas las teclas del teclado.
Para probar el evento keyup implementaremos un programa que permita solo ingresar 20 caracteres y nos informe con un mensaje la cantidad de caracteres disponibles para seguir escribiendo.
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="texto" maxlength="20" size="20">
<br>
<p>Máxima cantidad de caracteres disponibles:<span id="cantidad">20</span></p>
<script>
addEventListener('DOMContentLoaded',inicio,false);
function inicio()
{
document.getElementById('texto').addEventListener('keyup',presion,false);
}
function presion()
{
var canti=document.getElementById('texto').value.length;
var disponibles=20-parseInt(canti);
document.getElementById('cantidad').innerHTML=disponibles;
}
</script>
</body>
</html>
Definimos un control text y lo limitamos a 20 como máximo:
Disponemos un elemento span para mostrar la cantidad de caracteres como máximo a ingresar:
Registramos el evento keyup para el control texto:
{
document.getElementById('texto').addEventListener('keyup',presion,false);
}
Cada vez que se suelta la tecla cuando estamos escribiendo en el control de texto procedemos a extraer el valor del control texto y obtener mediante la propiedad length la cantidad de caracteres tipeados hasta este momento y seguidamente restamos a 20 el número de carácteres tipeados y procedemos a mostrarlo en el elemento spam:
{
var canti=document.getElementById('texto').value.length;
var disponibles=20-parseInt(canti);
document.getElementById('cantidad').innerHTML=disponibles;
}