2

Tenho uma lista de item no qual ao clicar em qualquer item, e direcionado para uma outra pagina para detalhes do item. Gostaria de ao clicar no botão ESC do teclado, voltar para página anterior.

Basicamente fazer a função de navegação do navegador voltando para a página anterior, como a imagem abaixo:

inserir a descrição da imagem aqui

Como voltar para pagina anterior ao clicar esc?

2 Respostas 2

3

Basta você verificar se a tecla apertada foi o ESC (key Code 27) e utilizar o Window.history para voltar a página anterior.

Veja o exemplo abaixo:

document.onkeyup = function(e) {
  e = e || window.event; //compatibilidade com navegadores antigos IE

  if (e.keyCode == 27) {
    history.back(); //ou history.go(-1); 
  }
};

Exemplo no JSFiddle.

Caso queira entender mais sobre o Browse History você pode ver mais detalhes aqui.

Esta pergunta possui alguns outros exemplos de como fazer o que deseja.

Caso queira entender melhor como funciona cada evento, você pode ver este exemplo que tirei desta resposta.

7
  • Na verdade, isso só funciona se manter o botão pressionado.
    – viana
    Commented 8/05/2017 às 15:03
  • @acklay Estava usando o evento errado, sorry. Editei a resposta
    – Randrade
    Commented 8/05/2017 às 15:05
  • 2
    @GuilhermeNascimento Feito, obrigado pela dica
    – Randrade
    Commented 8/05/2017 às 15:06
  • @Randrade tem certeza que é onKeyDown? Ainda continua a voltar quando mantem o botão precionado. =P
    – viana
    Commented 8/05/2017 às 15:09
  • 2
    @acklay addEventListener adicionar como um evento "ouvinte" e pode ter vários eventos, você pode gerenciar eles removendo sem afetar outros, o .onkeyup por exemplo só pode ser um único evento controlado pelo atributo ou propriedade. Note que no IE6/7/8 (8 com quircksmode) usavamos attachEvent ao invés de addEventListener. Uma coisa que o que addEventListener não tem até o ES5 pelo menos e a linguagem ActionScript3.0 tem é a prioridade, mas isto é outra história.
    – Syzoth
    Commented 8/05/2017 às 15:31
1

Para o seu caso pode ser um tanto de excesso, mas pode usa a biblioteca que eu montei KeyMap.

document.onKeyMap('esc', function(){
  // history.back(); <-- COGIGO REAL
  alert('ESC');
});
<script src="https://cdn.rawgit.com/Lautert/KeyMap/master/KeyMap.js"></script>

1
  • 1
    Boa dica, gostei muito da lib, todavia o mais interessante dela é a combinação de teclas, tenho certeza que deve haver alguma pergunta que se encaixaria muito bem como resposta :)
    – Syzoth
    Commented 8/05/2017 às 15:09

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 .