Leitor de Teclas em Javascript e PHP

Publicado por Buckminster em 01/02/2023

[ Hits: 3.286 ]

5 0

Denuncie Favoritos Indicar Impressora

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

Criar QR Code pelo navegador

Bloquear P2P no IPtables

Criar alias no Shell Fish

Configurar teclado no Linux com Modmap

Nunca execute esses comandos

Leitura recomendada

Can I use - Checar compatibilidade de comandos HTML5, CSS, JavaScript e outros

Adicionar Facebook Comments no Google Sites

HTML com Broffice.org

Direcionando o browser para outra URL

Tutorial básico de SEO com o Google (SEO starter guide)

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 0

[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.

0 0