Publicidad

Introducción:

Hola chicos hoy veremos el evento keypress como dice el título, este es el último de los 3 eventos que quería mostrarles los anteriores fueron keyup y keydown.

Espero que les sea útil y como no tengo nada más que decir 😁… mejor vamos al tema.

keypress javaScript

¿Qué es keypress?

Es un evento de javascript, este evento es ejecutado cuando presionamos cualquier tecla que produce un caracter.

onkeypress j, onkeypress javascript

Publicidad

Una forma de escribir el evento keypress es la siguiente:

window.onkeydown = function (event, index){
   if (event.keyCode == '32'){
      console.log('Hola kj');
   }
}

Ejemplo usando el evento keypress

En el siguiente ejemplo moveremos un cuadrado en vertical cuando presionamos la tecla de espacio o barra espaciadora.

El movimiento en vertical sera continuo hasta que llegue a los 300 pixeles luego desciende y regresa a su posición. Para que esto funcione usaremos el cuadrante I del eje de coordenadas y lo aplicaremos al documento html mediante el css.

<html>
   <head>
      <meta charset="UTF-8">
      <title>cuadrado</title>
      <style>			
         #cuadrado{
            width: 110px;
            height: 110px;
	    background-color: #ff339c;
	    border-radius: 10px;
	    position: absolute;
	    bottom: 0px;
	    left: 0px;			
	 }
      </style>
   </head>
   <body>
      <div id="cuadrado"></div>
         <script>
            var y = 0;
	    //Tecla de espacio = 32
	    function arriba(){
	       if(y < 300){
	          y = y + 1;
		  document.getElementById('cuadrado').style.bottom = y + 'px';
		  setTimeout(arriba, 5);
	       }else{
	          abajo();
	       }		
            }
			
	    function abajo(){
               if(y > 0){
	          y = y - 1;
		  document.getElementById('cuadrado').style.bottom = y + 'px';
		  setTimeout(abajo, 5);
	       }
	    }
						
	    function move(e){
	       if(e.keyCode == '32'){
	          arriba();
		}
	    }			
	    window.onkeypress = move;
	 </script>
   </body>
</html>

Para ver y probar el funcionamiento de este código clic aquí.

También puedes ver el código y descargar el archivo desde aquí.

Publicidad


Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments