0

Abaixo tenho dois campos usando a mesma função. No primeiro campo uso o onkeydown e no segundo 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">

Na função eu verifico se o que foi digitado é um número com isNaN(e.key). Se o que foi digitado não for um número, irá entrar no if, cancelar o evento e sair da função (return). Porém, apenas no evento onkeydown, caso seja digitado qualquer tecla que não seja um número, o evento é cancelado normalmente e nada acontece no input. Mas no evento onkeyup, se eu digitar uma letra, por exemplo, a letra é inserida no input.

Gostaria de saber o porquê do preventDefault() funcionar em um e não funcionar no outro evento.

Pesquisei no MDN e lá diz que o evento keyup é cancelável.

7
  • 2
    Acho que é como a API do JS funciona, o value é inputado no keydown, no keyup não adianta validar, pq a entrada do dado foi no keydown. pelo meu entender das coisas o dado é inputado no "press", não no "release" então como vc vai validar se é número se já houve a entrada do dado... Eu não tenho certeza do que estou falando, mas é o que aparenta olhando como leigo no assunto
    – hugocsl
    Commented 2/09/2019 às 23:41
  • 1
    Humm... faz sentido e acendeu uma luzinha no fim do túnel.
    – Sam
    Commented 2/09/2019 às 23:43
  • 2
    É tipo vc levar um tiro e depois colocar o colete, vc tem que colocar o colete antes do tiro vir. Vc tem que validar antes da bala entrar, não depois que ela já entrou...:D
    – hugocsl
    Commented 2/09/2019 às 23:53
  • 1
    O evento é cancelado, tanto que o console.log não é mostrado, mas isso não retira os carateres que já lá estão.
    – Isac
    Commented 2/09/2019 às 23:56
  • 1
    O cancelar do evento pode servir em efeitos de bubbling do evento, em que ele é cancelado e outros elementos já não o capturam, mas não para eliminar conteúdo do campo. Mas só confirmando na fonte mesmo.
    – Isac
    Commented 3/09/2019 às 0:02

1 Resposta 1

4

Não é que o keyup não pode ser cancelado, mas quem trata que foi pressionada uma tecla é o keydown, uma vez que não cancelou o keydown isso não pode mais ser feito, e o que foi digitado já está no input.

O evento keyup é mais um evento de notificação, para avisar que a tecla que foi pressionada agora foi liberada. É executado após o keydown e keypress, e ele não pode desfazer o que foi feito nesses outros eventos.

Parece meio inútil, mas imagine um jogo, em que a tecla de tiro seja "espaço", no keypress do espaço dispara um tiro e continua atirando, até que o evento keyup aconteça, daí pode disparar uma função que faça algo, como "carregar mais tiros", só um exemplo pra pensa na funcionalidade desse evento.

Veja pelo log que o evento é cancelado, mas nada muda no input, pois o keydown não foi cancelado:

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
  • 1
    Mt boa a explicação. Obg!
    – Sam
    Commented 3/09/2019 às 3:03

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 .