1
resposta

Entender o motivo de ficar ativa

Olhando o Forum vi que um colega notou que se clicarmos rapidamente tab e espaço ou enter, as teclas podem ficar ativas. Ele até colcou um "else" abaixo de quando ativamos as teclas. Fiz o teste e realmente fica ativa. Qual o motivo delas ficarem ativas?

const listaDeTeclas = document.querySelectorAll('input[type=button]');
const inputTel = document.querySelector('input[type=tel]');

for(var i = 0; i < listaDeTeclas.length; i++){

  const tecla = listaDeTeclas[i];

  tecla.onclick = function () {
    inputTel.value = inputTel.value + tecla.value;
  }

  tecla.onkeydown = function (event) {
    if(event.code === "Enter" || event.code === "Space"){  
      tecla.classList.add('ativa');
    }else {
      tecla.classList.remove('ativa');
    }
  }

 tecla.onkeyup = function (){
   tecla.classList.remove('ativa');
 }
}
1 resposta

Olá Daniel, tudo bem?

O motivo das teclas ficarem ativas é que quando você clica rapidamente em "tab" e "espaço" ou "enter", o evento "keydown" é acionado e, em seguida, o evento "keyup" é acionado. No entanto, como você está clicando rapidamente, o evento "keyup" pode não ser acionado imediatamente, fazendo com que a tecla fique ativa por um tempo.

Para tentar resolver, você pode adicionar um tempo de espera antes de remover a classe "ativa" no evento "keyup". Por exemplo:

tecla.onkeyup = function (){
  setTimeout(function(){
    tecla.classList.remove('ativa');
  }, 100);
}

Dessa forma, a classe "ativa" será removida após 100 milissegundos, mesmo que o evento "keyup" não seja acionado imediatamente.

Espero ter ajudado e bons estudos!