Como detecto quando uma das teclas de seta é pressionada? Eu usei isso para descobrir:
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}
Embora funcionasse para todas as outras teclas, não funcionava para as teclas de seta (talvez porque o navegador deva rolar essas teclas por padrão).
javascript
keypress
keyboard-events
mihsathe
fonte
fonte
keypress
eventos para teclas de seta, mas você está certo quekeydown
sempre funciona para teclas de seta.53
umkeydown
evento. Você começa37
comkeypress
, que é uma coisa diferenteonkeyup
e pare o evento lá. Realisticamente, você não deve modificar o comportamento da interface do usuário com Javascript.Função de chamada para cima e para baixo. Existem códigos diferentes para cada tecla.
fonte
e = e ? e : window.event;
Ou:if (typeof(e) === "undefined") { e = window.event; }
keyCode === 32
, nãokeyCode == '32'
oukeyCode === '32'
.event.key === "ArrowRight" ...
Mais recente e muito mais limpo: use
event.key
. Chega de códigos numéricos arbitrários! Se você está transpilando ou sabe que todos os usuários estão em navegadores modernos, use isso!Manuseio Detalhado:
Você pode estendê-lo facilmente para verificar
"w", "a", "s", "d"
ou qualquer outra chaveDocumentos do Mozilla
Navegadores suportados
PS
event.code
é o mesmo para setasfonte
key
e nãokeyCode
, isso foi preterido.Possivelmente a formulação mais concisa:
Demonstração (graças ao usuário Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/
Isso deve funcionar em vários navegadores. Deixe um comentário se houver um navegador em que ele não funcione.
Existem outras maneiras de obter o código da chave (e.which, e.charCode e window.event em vez de e), mas elas não devem ser necessárias. Você pode experimentar a maioria deles em http://www.asquare.net/javascript/tests/KeyCode.html . Observe que event.keycode não funciona com onkeypress no Firefox, mas funciona com onkeydown.
fonte
Use
keydown
, nãokeypress
para teclas não imprimíveis, como teclas de seta:A melhor referência de evento-chave do JavaScript que encontrei (superando o modo quirks, por exemplo) está aqui: http://unixpapa.com/js/key.html
fonte
Resposta moderna, pois keyCode agora está obsoleto em favor da chave :
fonte
Eu acredito que o método mais recente seria:
Isso pressupõe que o desenvolvedor deseja que o código esteja ativo em qualquer lugar da página e que o cliente deve ignorar qualquer outra tecla pressionada. Eliminar o event.preventDefault (); line se as teclas pressionadas, incluindo aquelas capturadas por esse manipulador, ainda devem estar ativas.
fonte
fonte
arrs
fora da função? Não há necessidade de recriá-lo cada chamadaAqui está um exemplo de implementação:
fonte
var targetElement = typeof $0 !== 'undefined' ? $0 : document.body;
ou apenas:var targetElement = document.body;
está ok #Aqui está como eu fiz isso:
fonte
Consegui prendê-los com jQuery:
Um exemplo: http://jsfiddle.net/AjKjU/
fonte
keypress
não funcionará com as teclas de seta. Você deve usar em$(document).on('keydown', function() {...})
vez dissoEsse é o código de trabalho para chrome e firefox
fonte
Eu também estava procurando por essa resposta até encontrar este post.
Encontrei outra solução para conhecer o código das chaves diferentes, cortesia do meu problema. Eu só queria compartilhar minha solução.
Basta usar o evento keyup / keydown para escrever o valor no console / alertar o mesmo usando
event.keyCode
. gostar-- rupam
fonte
Isso é mais curto.
function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }
fonte
if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
Essa biblioteca é demais! https://craig.is/killing/mice
Você precisa pressionar a sequência um pouco rápido para destacar o código nessa página.
fonte
Re respostas que você
keydown
não precisakeypress
.Supondo que você queira mover algo continuamente enquanto a tecla é pressionada, acho que
keydown
funciona para todos os navegadores, exceto o Opera. Para o Opera,keydown
somente dispara na 1ª pressão. Para acomodar o Opera, use:fonte
As teclas de seta são acionadas no keyup
onkeydown permite ctrl, alt, merdas
onkeyup permite tabulação, setas para cima, setas para baixo, setas para a esquerda, setas para baixo
fonte
Se você usa jquery, também pode fazer assim,
fonte
controlar os códigos das teclas
%=37
e&=38
... e apenas as teclas de seta restantes = 37 para cima = 38fonte
Se você deseja detectar pressionamentos de tecla de seta, mas não precisa de Javascript específico
fonte
Com chave e ES6.
Isso fornece uma função separada para cada tecla de seta sem usar a chave e também funciona com as teclas 2,4,6,8 no teclado numérico quando
NumLock
está ativado .fonte