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.
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.
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.
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).
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.