Why can I cancel the onkeydown event but can’t cancel the onkeyup?

Asked

Viewed 217 times

0

Below I have two fields using the same function. In the first field I use the onkeydown and in the second onkeyup:

function eventos(e){
   if(isNaN(e.key)){
      e.preventDefault();
      return;
   }
   console.log("Um número foi digitado");
}

document.getElementById("campo1").onkeydown = eventos;
document.getElementById("campo2").onkeyup = eventos;
Digite apenas números (evento keydown):
<br>
<input id="campo1">
<br><br>
Digite apenas números (evento keyup):
<br>
<input id="campo2">

In the function I check if what was typed is a number with isNaN(e.key). If what was typed is not a number, will enter the if, cancel event and exit function (return). However, only at the event onkeydown, if any key other than a number is entered, the event is canceled normally and nothing happens in the input. But in the event onkeyup, if I type a letter, for example, the letter is inserted in the input.

I’d like to know why preventDefault() work in one and not work in the other event.

I searched the MDN and there it says that the event keyup is cancellable.

javascript javascript-events
  • 2

    I think that’s how the JS API works, the value is embedded in the keydown, the keyup is no use validating, because the data entry was in the keydown. In my opinion the data is entered in the "press", not in the "release" then as you will validate if it is number if there has already been the input of the data... I’m not sure what I’m talking about, but it’s what you look like looking at as layman on the subject

  • 1

    Hmm... makes sense and lit a little light at the end of the tunnel.

  • 2

    It’s like you get shot and then put the vest on, you have to put the vest on before the shot comes. You have to validate before the bullet enters, not after it has already entered...: D

  • It really makes sense what you said.

  • 1

    The event is canceled, so much so that the console.log is not shown, but this does not take away the characters that are already there.

  • @Isac does not enter the console because of return. That is, in the keyup event, whether or not preventDefault() is there.

  • 1

    The cancellation of the event may serve in the effects of Bubbling of the event, where it is canceled and other elements no longer capture it, but not to delete content from the field. But only by confirming in the same source.

Show 2 more comments

1 answer

4

It’s not that the keyup can not be canceled, but who is dealing that has been pressed a key is the keydown, since it did not cancel the keydown this can no longer be done, and what was typed is already in the input.

The event keyup is another notification event, to let you know that the key that was pressed has now been released. It is executed after the keydown and keypress, and he cannot undo what was done in those other events.

It seems kind of useless, but imagine a game, in which the shooting key is "space", no keypress from space fires a shot and continues shooting, until the event keyup happen, then you can fire a function that does something, like "carry more shots", just an example to think about the functionality of this event.

Check through the log that the event is canceled, but nothing changes in the input, because the keydown was not canceled:

document.addEventListener('keydown', event => {
    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
        event.preventDefault();
        console.log('evento cancelado, keydown');
    } else {
         console.warn('evento não pode ser cancelado, keydown');
    }
});

document.addEventListener('keyup', event => {
    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
        event.preventDefault();
        console.log('evento cancelado keyup');
    } else {
        console.warn('evento não pode ser cancelado keyup');
    }
});
<input type="text" id="teste" />

  • 1

    Mt good the explanation. Obg!

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.