onKeyPress vs. onKeyUp e onKeyDown

Qual é a diferença entre esses três events? Ao pesquisar, descobri que

O evento KeyDown é acionado quando o usuário pressiona uma tecla.

O evento KeyUp é acionado quando o usuário libera uma chave.

O evento KeyPress é acionado quando o usuário pressiona e solta uma tecla. (onKeyDown seguido por onKeyUp)

Eu entendo os dois primeiros, mas o KeyPress não é o mesmo que o KeyUp ? (ou é possível liberar uma chave ( KeyUp ) sem pressionar ( KeyDown )?)

Isso é um pouco confuso, alguém pode esclarecer isso para mim?

Confira aqui o link arquivado originalmente usado nesta resposta.

A partir desse link:

Em teoria, os events keydown e keyup representam as teclas sendo pressionadas ou liberadas, enquanto o evento keypress representa um caractere sendo typescript. A implementação da teoria não é a mesma em todos os navegadores.

KeyPress , KeyUp e KeyDown são análogos a, respectivamente: Click, MouseUp e MouseDown .

  1. Down acontece primeiro
  2. Imprensa acontece segundo (quando o texto é typescript)
  3. Acontece por último (quando a input de texto está completa).

A exceção é o webkit , que possui um evento extra:

 keydown keypress textInput keyup 
 window.addEventListener("keyup", log); window.addEventListener("keypress", log); window.addEventListener("keydown", log); function log(event){ console.log( event.type ); } 

onkeydown é acionado quando a tecla está desativada (como nos atalhos; por exemplo, em Ctrl+A , a Ctrl é Ctrl ‘down’).

onkeyup é acionado quando a chave é liberada (incluindo chaves modificadoras / etc)

onkeypress é acionado como uma combinação de onkeydown e onkeyup , ou dependendo da repetição do teclado (quando onkeyup não é triggersdo). (esse comportamento de repetição é algo que eu não testei. Se você testar, adicione um comentário!)

textInput (somente webkit) é acionado quando algum texto é inserido (por exemplo, Shift+A entra em maiúscula ‘A’, mas Ctrl+A seleciona texto e não insere nenhuma input de texto. Nesse caso, todos os outros events são triggersdos)

Parece que onkeypress e onkeydown fazem o mesmo (dentro da pequena diferença de teclas de atalho já mencionada acima).

Você pode tentar isto:

  


E você verá que os events onkeypress e onkeydown são acionados enquanto a tecla é pressionada e não quando a tecla é pressionada.

A diferença é que o evento é acionado não uma vez, mas muitas vezes (contanto que você mantenha pressionada a tecla).

Se você usar alguns desses events, fique atento e identifique quantas vezes seu código será executado.

E desculpe pelo meu Inglês as lições eram pobres.

A maioria das respostas aqui são focadas mais em teoria do que em questões práticas e há algumas grandes diferenças entre keyup e keypress no que se refere a valores de campo de input, pelo menos no Firefox (testado em 43).

Se o usuário digitar 1 em um elemento de input vazio:

  1. O valor do elemento input será uma string vazia (valor antigo) dentro do manipulador keypress

  2. O valor do elemento de input será 1 (novo valor) dentro do manipulador de keyup .

Isso é de importância crítica se você estiver fazendo algo que depende de conhecer o novo valor após a input, em vez do valor atual, como validação em linha ou tabulação automática.

Cenário:

  1. O usuário digita 12345 em um elemento de input.
  2. O usuário seleciona o texto 12345 .
  3. O usuário digita a letra A

Quando o evento de keypress acionado após digitar a letra A , a checkbox de texto agora contém apenas a letra A

Mas:

  1. Field.val () é 12345 .
  2. $ Field.val (). Comprimento é 5
  3. A seleção do usuário é uma string vazia (impedindo que você determine o que foi excluído sobrescrevendo a seleção).

Portanto, parece que o navegador (Firefox 43) apaga a seleção do usuário, triggers o evento de keypress , atualiza o conteúdo dos campos e triggers a chave.

O evento onkeypress funciona para todas as chaves exceto ALT, CTRL, SHIFT, ESC em todos os navegadores, onde o evento onkeydown funciona para todas as chaves. Significa que o evento onkeydown captura todas as chaves.

Basicamente, esses events agem de forma diferente em diferentes tipos de navegadores e versões, eu criei um pequeno teste jsBin e você pode verificar o console para descobrir como esses comportamentos de events para o seu ambiente de destino, espero que essa ajuda. http://jsbin.com/zipivadu/10/edit

Este artigo de Jan Wolter é a melhor peça que eu encontrei, você pode encontrar a cópia arquivada aqui se o link estiver morto.

Explica todos os events chave do navegador muito bem,

O evento keydown ocorre quando a tecla é pressionada, seguida imediatamente pelo evento de pressionamento de tecla. Em seguida, o evento de chave é gerado quando a chave é liberada.

Para entender a diferença entre keydown e keypress , é útil distinguir entre caracteres e chaves . Uma chave é um botão físico no teclado do computador. Um caractere é um símbolo typescript pressionando um botão. Em um teclado dos EUA, pressionar a tecla 4 enquanto pressiona a tecla Shift normalmente produz um caractere de “cifrão”. Isso não é necessariamente o caso em todos os teclados do mundo. Em teoria, os events keydown e keyup representam as teclas sendo pressionadas ou liberadas, enquanto o evento keypress representa um caractere sendo typescript. Na prática, nem sempre é assim que é implementado.

Por um tempo, alguns browers triggersram um evento adicional, chamado textInput , imediatamente após o pressionamento de tecla . Versões anteriores do padrão DOM 3 pretendiam isso como um substituto para o evento keypress , mas toda a noção foi posteriormente revogada. O Webkit suportou isso entre as versões 525 e 533, e me disseram que o IE o suportou, mas eu nunca o detectei, possivelmente porque o Webkit exigia que ele fosse chamado textInput enquanto o IE o chamava de textinput .

Há também um evento chamado input , suportado por todos os navegadores, que é acionado logo após uma alteração em uma área de texto ou campo de input. Tipicamente, o pressionamento de tecla será triggersdo, então o caractere typescript aparecerá na área de texto e, em seguida, a input será triggersda. O evento de input na verdade não fornece nenhuma informação sobre qual chave foi digitada – você teria que inspecionar a checkbox de texto para descobrir o que mudou – então nós realmente não a consideramos um evento chave e realmente não documentamos aqui . Embora tenha sido originalmente definido apenas para textareas e checkboxs de input, acredito que haja algum movimento para generalizá-lo para triggersr em outros tipos de objects também.

Por um lado, há um significado óbvio: KeyDown é acionado quando uma tecla é pressionada , o KeyUp triggers quando um botão pressionado é liberado , o KeyPress triggers quando uma tecla é pressionada e liberada .

Por outro lado, algumas chaves triggersm alguns desses events e não demitem outras . Por exemplo, KeyPress ignora delete, setas, home / end, ctrl, alt, shift, etc., enquanto KeyDown e KeyUp não.

Finalmente, há alguns pragmáticos . Para manipular as setas, você provavelmente precisará usar o onKeyDown: se um usuário segura o “baixo”, o KeyDown triggers várias vezes (e o KeyPress triggers apenas uma vez!). Além disso, em alguns casos, você pode evitar facilmente a propagação de KeyDown, mas não pode (ou não pode facilmente) impedir a propagação de KeyUp (por exemplo, se você quiser enviar ao inserir sem adicionar nova linha ao campo de texto). Se você quiser ajustar a altura de uma área de texto ao conteúdo, provavelmente não usará onKeyDown, mas sim onKeyPress. Eu usei todos os 3 no meu projeto, mas infelizmente pode ter esquecido alguns dos pragmáticos.

Só queria compartilhar uma curiosidade:

Ao usar o evento onkeydown para ativar um método JS, o charcode para esse evento NÃO é o mesmo que o obtido com onkeypress!

Por exemplo, as teclas numéricas retornarão os mesmos códigos de caracteres que as teclas numéricas acima das teclas de letra ao usar onkeypress, mas NÃO ao usar onkeydown!

Demorei alguns segundos para descobrir por que meu script que checou certos códigos de caracteres falhou ao usar onkeydown!

Demonstração: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

e sim. Eu sei que a definição dos methods é diferente .. mas o que é muito confuso é que em ambos os methods o resultado do evento é recuperado usando event.keyCode .. mas eles não retornam o mesmo valor .. não é muito implementação declarativa.

KeyDown – quando você pressiona fisicamente a tecla

KeyUp – quando você libera fisicamente uma chave

KeyPress – como caracteres são introduzidos … KeyPress triggersrá várias vezes se você segurar uma tecla, enquanto os outros só irão triggersr uma vez.