¿Cómo detectar la pulsación de una tecla usando JavaScript?

En este artículo, la detección del teclado se realiza mediante HTML y CSS.
HTML significa «Lenguaje de marcado de hipertexto». El lenguaje HTML ayuda al desarrollador a crear y diseñar los elementos de la página web como enlaces, secciones, párrafos, encabezados y citas en bloque para aplicaciones web.

CSS significa «hoja de estilo en cascada». Las hojas de estilo en cascada se utilizan para diseñar diseños de páginas web. Los estilos se definen para dar estilos a tablas, tamaños y textos.

JavaScript es un lenguaje de programación de secuencias de comandos utilizado en el lado del cliente y del servidor que hace que las páginas web hablen y se comuniquen entre sí.
Todas las tecnologías anteriores se utilizan para implementar la detección de pulsaciones de teclas.
Se pueden usar aplicaciones de edición de programas como Atom o Sublime Text para compilar los programas.

Ejemplo:
Cree un archivo index.html para el siguiente código.

<html>
<head>   
     <link rel="stylesheet" type="text/css"
     href="main.css">
    <script type="text/javascript" src="main.js">
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

Para el código HTML anterior, debemos incluir main.css y main.js

Código CSS: El siguiente código está escrito en el archivo main.css .

body
{
    font-family: monospace, arial;
    font-size: 38px;
    text-align: center;
}

Código JavaScript: el siguiente código está escrito en el archivo main.js.

window.onload = function(){
    var demo = document.getElementById('demo');
    var value = 0;
    var space_bar = 32;
    var right_arrow = 39;
  
    window.onkeydown= function(gfg){
        if(gfg.keyCode === space_bar){
            value++;
            demo.innerHTML = value;
        };
        if(gfg.keyCode === right_arrow)
       {
           alert("Welcome to GeeksForGeeks!");
       };
    };
};

Aquí,

var space_bar = 32

var right_arrow = 39

son en realidad los códigos clave que corresponden a la clave específica. Siempre que se haga clic en la barra espaciadora o en la flecha hacia la derecha, el HTML detectará el tipo de clic y responderá por la cantidad de veces que se hizo clic o por un mensaje.

Producción:

Se muestra un número cuando se hace clic una vez en la barra espaciadora.
Cuando se hace clic en la flecha derecha, la página responde con un mensaje.

Publicación traducida automáticamente

Artículo escrito por polokghosh53 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta