En este Tutorial de Detección de Teclas y Atajos en el teclado en JavaScript, puede aprender cómo detectar la tecla presionada y el atajo del teclado usando JavaScript. El tutorial tiene como objetivo proporcionar a los estudiantes y nuevos programadores una referencia para aprender algunas técnicas útiles que podrían ayudarlos a lograr los requisitos de sus proyectos actuales o futuros. Aquí, proporcionaré scripts de páginas web que demuestran el objetivo principal de este tutorial.
¿Por qué necesitamos detectar la tecla presionada en una aplicación web? No es necesario detectar la tecla presionada en el teclado para crear un sitio web o una aplicación web. Los desarrolladores a menudo implementan este tipo de función para brindar a sus clientes o usuarios finales una mejor experiencia al usar sus aplicaciones desarrolladas. Detectar las teclas presionadas puede ayudarlo a identificar el código de teclas que los desarrolladores usan comúnmente para ejecutar otra funcionalidad cuando se presiona o presiona la tecla específica.
DESCARGAR TODO EL CODIGO FUENTE y BASE DE DATOS
Detectar la Tecla Presionada y el Atajos del teclado no es complicado de lograr. JavaScript viene con métodos incorporados, detectores de eventos y API, y algunos de estos se volvieron útiles para detectar los datos de las teclas presionadas. Usando los detectores de eventos keypress, keyup y keydown de JS, podemos simplemente detectar que se ha presionado una tecla y, usando los datos u objetos del evento, podemos identificar el carácter clave o el código de la tecla que se ha presionado. Consulte el script de esta página web que creé y proporcioné a continuación para comprenderlo mejor.
Los scripts a continuación dan como resultado una página web que puede detectar la tecla y el atajo presionados y mostrar los detalles de la tecla presionada en un bloque o panel de la página.
Aquí está el script de archivo HTML conocido como index.html. Este archivo contiene los elementos HTML que se utilizarán para el diseño de la página o la interfaz de la página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS and JS - Detecting Key Pressed</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="content-md-lg py-3">
<div class="col-lg-8 col-md-10 col-sm-12 col-12 mx-auto">
<div class="page-title">Detecting Key Pressed using HTML, CSS, and JavaScript</div>
<hr style="margin:auto; width:25px" class="border-light opacity-100">
</div>
<div class="container-lg">
<div class="row py-3 my-2">
<div class="col-lg-5 col-md-5 col-sm-10 col-12 mx-auto">
<div class="card rounded-0">
<div class="card-body">
<div class="container-fluid">
<div id="bigDetails">
<div class="keyPressed">-</div>
<div class="keyCodePressed">-</div>
</div>
<div id="smallDetails">
<label for="keyPressedLabel">Pressed Key</label>
<div class="keyPressed">-</div>
<label for="keyCodePressedLabel">Pressed Key Code</label>
<div class="keyCodePressed">-</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
A continuación, aquí está la secuencia de comandos del archivo CSS conocida como style.css. Este archivo contiene el script de hoja de estilo personalizado para algunas de las interfaces y diseños de la página:
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Tillana:wght@400;600&display=swap');
:root{
--space-mono-font: 'Space Mono', monospace;
--border-dark-subtle: #373838;
--font-tillana:'Tillana', cursive;
}
*{
box-sizing: border-box;
}
body *{
font-family: var(--space-mono-font);
}
/**
Page Design
*/
body,
html{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body{
background-color: #282A3A;
}
.page-title{
font-size: 2.5rem;
font-weight: 500;
color: #fff;
letter-spacing: 3px;
font-family: var(--secular-font);
text-align: center;
text-shadow: 0px 0px 3px #2020208c;
}
.border-dark-subtle{
border-color: var(--border-dark-subtle) !important;
}
/* div#bigDetails {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
} */
div#bigDetails .keyPressed {
color: #14b8c9;
font-size: 1.8rem;
padding: 0 1.2em;
font-weight: 600;
text-align: center;
}
div#bigDetails .keyCodePressed {
color: #14b8c9;
font-size: 2rem;
padding: 0 1.2em;
font-weight: 600;
text-align: center;
}
#smallDetails{
margin-top: 2em;
text-align: center;
}
#smallDetails label{
color: #757575;
}
#smallDetails div{
color: #000;
font-weight: 500;
}
Finalmente, aquí está el script del archivo JS conocido como script.js. Este archivo contiene los códigos que detectan la tecla presionada en la página web y muestran los detalles en su campo de texto designado:
// Element Selector
const keyPressedField = document.querySelectorAll('.keyPressed')
const keyCodePressedField = document.querySelectorAll('.keyCodePressed')
document.body.addEventListener('keyup', e => {
// Getting the press keyboard key
var pressedKey = e.code || e.key
// Getting the press keyboard key code or Character Code
var pressedKeyCode = e.charCode || e.keyCode || e.which
keyPressedField.forEach(el => {
// Update the Pressed Key Text Fields
el.innerText = pressedKey
})
keyCodePressedField.forEach(el => {
// Update the Pressed Key Code Text Fields
el.innerText = pressedKeyCode
})
})
Aquí hay una instantánea del resultado general de los scripts que proporcioné anteriormente:
¡Ahí tienes! También proporcioné el archivo zip del código fuente completo de los scripts que proporcioné anteriormente en este sitio web. El archivo zip del código fuente se puede descargar gratis en este sitio. Siéntase libre de descargar y hacer algunos experimentos para mejorar sus capacidades y conocimientos de programación JS.
Descarga el Tutorial Gratis en el siguiente enlace a continuacion:
DESCARGAR TODO EL CODIGO FUENTE
Tutorial de Detección de Teclas y Atajos en el teclado en JavaScript – Descargar el Sistema en el siguiente enlace:
DESCARGAR AQUÍ
¡Eso es todo! Espero que este Tutorial de Detección de Teclas y Atajos en el teclado en JavaScript lo ayude con lo que está buscando y sea útil para sus proyectos de aplicaciones web actuales y futuros.
