25

Quando exatamente são disparados? E quais os contextos de uso pra cada um?

Pergunto isso porque de todas vezes que precisei usar sempre resolvia só com onkeyup. Apesar da dúvida ser em javascript ela reflete em outras linguagens também.

3 Respostas 3

25

Eles cumprem funções diferentes.

onkeydown é o primeiro a disparar e podêmos pará-lo. Se tiveres um input podes evitar que a tecla premida escreva no input se tiveres um event handler associado.

onkeypress é o segundo a disparar. De notar que este evento não é disparado em teclas que não geram caracteres, como os F1 ~ F12, tab, esc, etc. De notar que o keypress gera resultados diferentes para letra grande e pequena.

onkeyup é disparado quando a tecla é largada e o seu input adicionado/registado no DOM. No caso de um input o novo caracter é inserido e não dá para cancelar, ou seja um input receberá o caractere.

Exemplos:

keydown

Um input que ignora vogais: http://jsfiddle.net/4t4ta4q5/

var input = document.querySelector('input');
var ignorar = ['a', 'e', 'i', 'o', 'u'];
input.addEventListener('keydown', function (e) {
    var char = e.keyCode || e.which;
    var letra = String.fromCharCode(char).toLowerCase();
    if (ignorar.indexOf(letra) != -1) e.preventDefault();
});

keypress

Distinguir letra grande de letra pequena: http://jsfiddle.net/awrjLphp/

function log(e) {
    var char = e.code || e.keyCode || e.which;
    var res = [e.type, char, String.fromCharCode(char), '<br />'].join(' | ');
    document.getElementById('res').innerHTML += res;
};

input.addEventListener('keydown', log);
input.addEventListener('keypress', log);

Este código vai dar

keydown | 77 | M | 
keypress | 109 | m | 

quando premir-mos o m pequeno e

keydown | 77 | M | 
keypress | 77 | M | 

no M grande.

keyup

Somar campos: http://jsfiddle.net/gz2ttyt1/

var inputs = $$('body > input').addEvent('keyup', function (e) {
    var numerico = this.value.replace(/[^0-9\.]/g, '');
    if (!numerico) this.value = this.value.slice(0, -1);
    var soma = inputs.map(function (input) {
        return parseFloat(input.value) || 0;
    }).reduce(function (a, b) {
        return a + b;
    }, 0);
    $$('body div > input').set('value', soma);
});

Isso é código MooTools, mas no fundo corre um script a cada keyup e soma os valores dos inputs todos num campo com o total.

5
  • 1
    muito boa explicação e fácil de entender, +1!
    – Chun
    Commented 12/06/2015 às 16:03
  • Sergio, muito boa a resposta, teria uma situação para me indicar a usar o keypress ou não teria nenhuma boa? Commented 12/06/2015 às 16:47
  • 1
    @MaiconCarraro sim, vou juntar mas estou aqui com um prazo de entrega e com pouco tempo. Mas depois vou melhorar.
    – Sergio
    Commented 12/06/2015 às 16:49
  • 1
    @MaiconCarraro juntei mais exemplos :)
    – Sergio
    Commented 16/06/2015 às 22:00
  • Excelente Sergio :) Commented 16/06/2015 às 22:03
2

KeyPress, KeyDown e KeyUp são eventos acionados pelo teclado.

O KeyDown acontece primeiro (quando a tecla esta abaixando). O KeyPress acontece segundo (quando o texto for digitado). O KeyUp acontece depois da tecla digitada (quando a tecla estiver subindo e quando a entrada de texto está completo).

2

De acordo com este link:

keydown

Fires when the user depresses a key. It repeats while the user keeps the key depressed.

keypress

Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.

keyup

Fires when the user releases a key, after the default action of that key has been performed

Ou, em miúdos: A diferença entre eles é a ordem que ocorrem, no momento que o usuário pressiona uma tecla. Na teoria, eventos keydown e keyup representam a tecla sendo apertada ou solta, respectivamente, enquanto o evento keypress representa um caractér sendo digitado (e se repete caso o usuário continue segurando a tecla). A questão é que esta teoria não é implementada da mesma maneira por todos os browsers.

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 .