4

Estou fazendo uma função, para que quando seja pressionada uma tecla do teclado, ela execute outra função. Com as teclas de letras, números e até o Enter funciona. Porém com a tecla ESC não funciona. Alguém já precisou fazer algo semelhante?

Segue código:

document.addEventListener('keypress', function(event){
    console.log(event.keyCode)
    if(event.keyCode == 27) {
        vm.fecha_modal();  
    }
})
2
  • 1
    Tenta asssim $(document).keyup(function(e) { if (e.keyCode === 13) $('.save').click(); // enter if (e.keyCode === 27) $('.cancel').click(); // esc }); Commented 10/08/2017 às 12:53
  • @PauloHDSousa deu certo! se quiser pode por como resposta Commented 10/08/2017 às 12:57

2 Respostas 2

5

Tenta asssim

$(document).keyup(function(e) { 
    if (e.keyCode === 27) 
        vm.fecha_modal(); 
}); 
2

Recomendo a utilizar a função abaixo getCharCode para resgatar o código do evento e depois, realizar a tratativa. O motivo de ter criado esta função é, em alguns browsers resgata o valor do código do evento com keyCode, em outros com which.

Então, criei um wrapper para ambos, assim terá uma compatibilidade maior de browsers. Para visualizar o código de cada tecla, clique sobre o campo e pressione as teclas.

Coloquei um console.log para apresentar os resultados. Com o código em mãos, basta escutar os eventos conforme nossos colegas informaram ou até mesmo, seguir o exemplo deste código.

function getCharCode(e) {
  e = (e) ? e : window.event, charCode = null;

  try {
    charCode = (e.which) ? e.which : e.keyCode;
    return charCode;
  } catch (err) {
    return charCode;
  }
}

$(function() {
  $('input').on('keyup', function(e) {
    console.log("Tecla pressionada %s (%s)", e.key, getCharCode(e));
  });
});
input {
  height: 100px;
  font-size: 40px;
  line-height: 100px;
  max-width: 100%;
  width: 100%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input value="" placeholder="Clique aqui e pressione as teclas" />

Você deve fazer log-in para responder a esta pergunta.

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