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.
console.log
não é mostrado, mas isso não retira os carateres que já lá estão.