En este artículo, vamos a discutir 2 métodos para registrar pulsaciones de teclas en tecnologías web utilizando JavaScript estándar y Jquery. También discutiremos los eventos relacionados con las pulsaciones de teclas en JavaScript. En primer lugar, tenemos que crear una estructura, así que primero hagamos un diseño HTML y CSS.
Diseño HTML y CSS: en el diseño dado, cuando se realiza una entrada en el campo, el valor del código clave se registrará en el cuadro.
Los eventos relacionados con las pulsaciones de teclas son los siguientes:
- keydown: este evento se activa cuando se presiona una tecla.
- pulsación de tecla: este evento se activa cuando se pulsa una tecla. Este evento no reconoce teclas como tabulador, shift, ctrl, retroceso, etc.
- keyup : este evento se activa cuando se suelta una tecla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
color: green;
}
.display {
border: 2px solid black;
height: 100px;
width: 400px;
text-align: center;
}
.input {
display: flex;
flex-direction: column;
font-size: 0px;
}
button {
border: none;
margin: 2px;
width: 80px;
height: 3vw;
float: right;
background-color: green;
color: white;
}
button:hover {
background-color: rgb(5, 94, 12);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="display"><h3></h3></div>
<div class="input">
<button>emit event</button>
</div>
</body>
</html>
Producción:
Conseguiremos activar un evento keypress/keydown/keyup en JS/jQuery usando 2 métodos:
- Usando Vanilla JavaScript: Usaremos el dispatchEvent nativo para crear eventos de teclado de la siguiente manera.
Agregamos un detector de eventos al botón para activar una serie de eventos que mostrarán ‘Hey Geek’ en la división de visualización que creamos. para ello hemos utilizado dispatchEvent(new KeyboardEvent(…)). KeyboardEvent es un constructor que toma un evento y un objeto de propiedades de evento como parámetros.
window.addEventListener('load',()=>{document.querySelector('button').addEventListener('click',()=>{document.dispatchEvent(newKeyboardEvent('keypress', {'key':'H'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'e'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'y'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':' '}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'G'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'e'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'e'}));document.dispatchEvent(newKeyboardEvent('keypress', {'key':'k'}));});});document.addEventListener('keypress', (event)=>{document.querySelector('h1').innerHTML += event.key;}); - Usando jQuery: primero creamos un evento e y le asignamos la propiedad clave como se muestra en el código anterior. Al usar Jquery.trigger(e), emitimos el evento y lo manejamos de la misma manera que lo hicimos en el enfoque 1. Sin embargo, en lugar de usar innerHTML, usamos el método .append() de Jquery .
$(document).ready(()=>{$('button').on('click',()=>{let e = $.Event('keypress');e.key ='H';$(document).trigger(e);e.key ='e';$(document).trigger(e);e.key ='y';$(document).trigger(e);e.key =' ';$(document).trigger(e);e.key ='G';$(document).trigger(e);e.key ='e';$(document).trigger(e);e.key ='e';$(document).trigger(e);e.key ='k';$(document).trigger(e);})});$(document).on('keypress', (event)=>{$('h1').append(event.key);})
Solución final: simplemente usaremos el enfoque 1 en este código, puede usar cualquiera de ellos de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.slim.js"
integrity="sha256-sCexhaKpAfuqulKjtSY7V9H7QT0TCN90H+Y5NlmqOUE="
crossorigin="anonymous">
</script>
<style>
h1 {
color: green;
}
.display {
border: 2px solid black;
height: 100px;
width: 400px;
text-align: center;
}
.input {
display: flex;
flex-direction: column;
font-size: 0px;
}
button {
border: none;
margin: 2px;
width: 80px;
height: 3vw;
float: right;
background-color: green;
color: white;
}
button:hover {
background-color: rgb(5, 94, 12);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="display"><h3></h3></div>
<div class="input">
<button>emit event</button>
</div>
<script type="text/javascript">
window.addEventListener("load", () => {
document.querySelector("button").addEventListener("click", () => {
document.dispatchEvent(new KeyboardEvent("keypress", { key: "H" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "y" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: " " }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "G" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "e" }));
document.dispatchEvent(new KeyboardEvent("keypress", { key: "k" }));
});
});
document.addEventListener("keypress", (event) => {
document.querySelector("h3").innerHTML += event.key;
});
</script>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA