Leitor de Teclas em Javascript e PHP

Publicado por Buckminster em 01/02/2023

[ Hits: 2.560 ]

 


Leitor de Teclas em Javascript e PHP



Um código simples (como tantos outros) para capturar o KeyCode das teclas. Salve com a extensão .php ou .html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" lang="pt-br">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Leitor de Teclas</title>
        <style>
            html {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100%;
              background: #FFD700;
              text-align: center;
              font-family: monospace;
              line-height: 1.4;
              font-size: 25px;
              color:blue;
            }
            pre {
              text-align: left;
            }
        </style>
        <script>
            document.addEventListener("keydown", function(event) {

              console.log(event);

              document.body.innerHTML = `

                <b>key (which): ${event.key}</b>
                <br>
                <b>which: ${event.which}</b>
                <br>
                <b>keyCode:</b> ${event.keyCode}
                <br>
                <b>shiftKey:</b> ${event.shiftKey}
                </br>
                <b>altKey:</b> ${event.altKey}
                <br>
                <b>ctrlKey:</b> ${event.ctrlKey}
                <br>
                <b>metaKey:</b> ${event.metaKey}
              `;

            });
        </script>
    </head>
    <body>
       Pressione uma tecla.
    </body>
</html>



Outras dicas deste autor

Dica para bloquear usuários em domínios após X tentativas com o Samba4

GRUB com senha criptografada no Debian Squeeze

Wireless no Debian Squeeze com WPA2

Instalar MySQL no Debian 12

Como resolver os erros 'a start job is running for wait for network to be configured' e 'a start job is running for raise network interfaces'

Leitura recomendada

Codificação HEXADECIMAL para HTML

Ativando Player HTML5 no YouTube

Sites e grupos para encontrar emprego de TI

HTML com Broffice.org

Aprendendo HTML

  

Comentários
[1] Comentário enviado por maurixnovatrento em 01/02/2023 - 21:13h


Show mano.

___________________________________________________________
Conhecimento não se Leva para o Túmulo.
https://github.com/mxnt10

[2] Comentário enviado por Buckminster em 02/02/2023 - 12:24h


[1] Comentário enviado por mauricio123 em 01/02/2023 - 21:13h


Show mano.

___________________________________________________________
Conhecimento não se Leva para o Túmulo.
https://github.com/mxnt10


Obrigado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts