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.
¿Qué es keypress?
Es un evento de javascript, este evento es ejecutado cuando presionamos cualquier tecla que produce un caracter.
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í.
