12

Estou quebrando a cabeça para criar uma função que devolva o código da tecla pressionada. Encontrei essa:

function inicializa(){
    document.addEventListener('keydown', pegaTecla);
}

function pegaTecla(){
  var tecla = event.keyCode;
  alert(tecla);
}

Porém com essa função só consigo que código da tecla seja exibido via alert e se tento return na função pegaTecla() não retorna e não é chamada todos as vezes q pressiono alguma tecla.

Como faço para quando eu pressionar uma tecla a função me devolva aquela tecla para posteriormente ela seja testada?

Aqui está o código na integra.
E aqui o resultado final.

Funciona exibindo o código da tecla todas as vezes q pressiono uma tecla.

4 Respostas 4

10

Faltou só usar String.fromCharCode() para obter a tecla pressionada (ao invés do número).

var pressed = document.getElementById('pressed');

function keyPressed(evt){
    evt = evt || window.event;
    var key = evt.keyCode || evt.which;
    return String.fromCharCode(key); 
}

document.onkeypress = function(evt) {
    var str = keyPressed(evt);
    pressed.innerHTML += str;
};
<h2 id='pressed'>Teclas pressionadas: </h2>

Exemplo solicitado nos comentários:

function keyPressed(evt){
    evt = evt || window.event;
    var key = evt.keyCode || evt.which;
    return String.fromCharCode(key); 
}

document.onkeypress = function(evt) {
    var str = keyPressed(evt);
    
    if(str == 'f')
        alert("Apertou o 'f', chamando uma função...");
};
<p>Pressione a tecla F</p>

4
  • Ah, agora que vi que precisava do código (e não da letra). De qualquer forma fica aí o exemplo :) 16/02/2015 às 4:23
  • e como faço para executar uma função assim q pressionado uma tecla ? pq qro criar uma rotina em q seja exibido uma tecla na tela e o usuário tem q pressiona-la. to com dificuldade da fazer a função executar um comparador assim q o usuário pressionar a tecla – 16/02/2015 às 4:24
  • @LeandroMacedo adicionei um exemplo. 16/02/2015 às 4:29
  • 1
    muio obrigado consegui fazer o que ta precisando :) 16/02/2015 às 4:56
6

Um dos possíveis motivos é que o uso de event direto como você fez é equivalente ao window.event, porém este evento não é acessível por todos navegadores. Você deve usar o primeiro parametro da função que é adiciona ao callback do addEventListener, assim:

`.addEventListener(..., function(event){ ... })`

Outro motivo é que você só usou .keyCode, para conseguir pegar o código você deve usar também (além do .keyCode) o .which.

Um exemplo:

var el = document.getElementById("result");

function minhaFuncao(codigo) {
    el.innerHTML += ", " + codigo;
}

document.addEventListener('keydown', function(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;

    minhaFuncao(code);
});
<div id="result">Teclas:</div>

9
  • legal, não sabia disso obrigado. 16/02/2015 às 4:20
  • e como faço para executar uma função assim q pressionado uma tecla ? 16/02/2015 às 4:20
  • pq qro criar uma rotina em q seja exibido uma tecla na tela e o usuário tem q pressiona-la. to com dificuldade da fazer a função executar um comparador assim q o usuário pressionar a tecla 16/02/2015 às 4:22
  • @LeandroMacedo eu editei a resposta, clique em "Executar trecho do código" e teste por favor, veja como ficou o código, é isto?
    – Reptile
    16/02/2015 às 4:25
  • muito obrigado @guilhermenascimento vc tb me ajudou bastante 16/02/2015 às 4:57
-2

Vi que sua dúvida já foi resolvida mas, custa nada deixar aqui um pequeno plugin com apenas o desejado, saber qual código do botão foi apertado

http://dkteclive.com/plugins/keymap.html

<script src='jquery.js'></script>
<input class='keydown' placeholder='keymap' autofocus />
<script>
    $('input.keydown').on('keydown', function(e) {
        event.preventDefault();
        $('input.keydown').val(e.keyCode); });
</script>
-2

para pegar a letra em si usa-se

iputs[x].addEventListener('keypress', function () {
  console.log(event.key) // se eu clicar 'p' vai me retornar 'p' ao contrário do keycode que retorna o código da tecla
});

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .