Eventos: keydown, keyup y keypress

Estos tres eventos son similares a los eventos del mouse: mousedown, mouseup y click pero orientados al teclado del equipo.

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 140 caracteres y nos informe con un mensaje la cantidad de caracteres disponibles para seguir escribiendo.

<html>
<head>

<script type="text/javascript">

  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('texto').addEventListener('keyup',presion,false);
  }

  function presion()
  {
    var canti=document.getElementById('texto').value.length;
    var disponibles=140-parseInt(canti);
    document.getElementById('cantidad').innerHTML=disponibles;
  }

</script>

</head>
<body>
<input type="text" id="texto" maxlength="140" size="140">
<br>
<p>Máxama cantidad de caracteres disponibles:<span id="cantidad">140</span></p>
</body>
</html>

Definimos un control text y lo limitamos a 140 como máximo:

<input type="text" id="texto" maxlength="140" size="140">

Disponemos un elemento span para mostrar la cantidad de caracteres como máximo a ingresar:

<p>Máxama cantidad de caracteres disponibles:<span id="cantidad">140</span></p>

Registramos el evento keyup para el control texto:

  function inicio()
  {
    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 140 el número de caractes tipeados y procedemos a mostrarlo en el elemento spam:

  function presion()
  {
    var canti=document.getElementById('texto').value.length;
    var disponibles=140-parseInt(canti);
    document.getElementById('cantidad').innerHTML=disponibles;
  }

Retornar