Leitor de Teclas em Javascript e PHP

Publicado por Buckminster em 01/02/2023

[ Hits: 2.829 ]

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

Desempacotar pacote debian (.deb), alterá-lo e reempacotar

Como resolver o erro no CUPS: Unable to get list of printer drivers

PostgreSQL 9.1 64 bits - Instalação no Debian Squeeze

Kubernetes, amplo material completo da CNCF com ferramentas e suas instalações, incluindo suporte à OpenAPI

Use o Google PageSpeed Insights para verificar um site

Leitura recomendada

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

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

Skype Web - Alternativa ao Skype desktop

Adicionar Facebook Comments no Google Sites

Tampermonkey - Executando JavaScript em Sites com o Chrome

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

1 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