25
When exactly are they fired? And what are the usage contexts for each one?
I ask this because every time I needed to use it I always solved it with onkeyup
. Although the doubt is in javascript
it reflects in other languages too.
25
When exactly are they fired? And what are the usage contexts for each one?
I ask this because every time I needed to use it I always solved it with onkeyup
. Although the doubt is in javascript
it reflects in other languages too.
25
They perform different functions.
onkeydown
is the first to fire and we can stop it. If you have an input you can prevent the keystroke from typing in the input if you have an Event Handler associated.
onkeypress
is the second to fire. Note that this event is not fired on keys that do not generate characters, such as F1 ~ F12, tab, Esc, etc. Note that the keypress
generates different results for large and small letter.
onkeyup
is triggered when the key is dropped and its input added/recorded in the DOM. In the case of an input the new character is inserted and it is not possible to cancel, or an input will receive the character.
keydown
An input that ignores vowels: 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
Distinguish large letter from small letter: 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);
This code will give
keydown | 77 | M |
keypress | 109 | m |
when we press the m
small and
keydown | 77 | M |
keypress | 77 | M |
in the M
great.
keyup
Add fields: 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);
});
This is Mootools code, but in the background runs a script each keyup
and sum the input values all in a field with the total.
2
Keypress, Keydown and Keyup are events triggered by the keyboard.
The Keydown happens first (when the key is lowering). The Keypress happens second (when the text is typed). The Keyup happens after the typed key (when the key is up and when the text input is complete).
2
According to this 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
Or, in kids: The difference between them is the order that occurs, the moment the user presses a key. In theory, events keydown
and keyup
represent the key being pressed or released, respectively, while the event keypress
represents a character being typed (and repeats if the user continues holding the key). The point is that this theory is not implemented in the same way by all browsers.
Browser other questions tagged javascript
You are not signed in. Login or sign up in order to post.
very good explanation and easy to understand, +1!
– Chun
Sergio, very good answer, would have a situation to tell me to use the keypress or would not have any good?
– Maicon Carraro
@Maiconcarraro yes, I will join but I am here with a delivery time and with little time. But then I will improve.
– Sergio
@Maiconcarraro added more examples :)
– Sergio
Excelente Sergio :)
– Maicon Carraro