Capturar o que as letras que o usuário digitar numa página

<div id="t"></div>
<script>
var keyTable = {
    '65': 'a',
    '66': 'b',
    '67': 'c',
    '68': 'd',
    '69': 'e',
    '70': 'f',
    '71': 'g',
    '72': 'h',
    '73': 'i',
    '74': 'j',
    '75': 'k',
    '76': 'l',
    '77': 'm',
    '78': 'n',
    '79': 'o',
    '80': 'p',
    '81': 'q',
    '82': 'r',
    '83': 's',
    '84': 't',
    '85': 'u',
    '86': 'v',
    '87': 'w',
    '88': 'x',
    '89': 'y',
    '90': 'z'
}
var userTyped = '';
document.addEventListener("keyup", function(e){
    if (keyTable[e.keyCode] !== undefined ) {
        userTyped += keyTable[e.keyCode];
    }

    document.getElementById("t").innerHTML = userTyped;
});
</script>

Bem simples, só ouvi o evento onkeyup, e fiz uma tabela para “traduzir” o keyCode para a letra correspondente.

4 Comments

  1. Teria sido util quando fiz isso, haha –> http://www.felipefialho.com/piano

    Boa dica.

  2. Estou começando agora no javascript, me soluciona uma dúvida, você fez uma lista de variáveis na função KeyTablet, o que é isso? Não poderia declarar as variáveis “jogadas” no escopo?

    O que significa o ” : ” ?

    Valeu!!

  3. Alessandro Moreira

    janeiro 8, 2014 at 16:11

    Saudações Bruno,

    Acho que vc poderia substituir o objeto: keyTable, pelo método estático: String.fromCharCode().

    Abrações.

Deixe uma resposta

Your email address will not be published.

*