Box-shadow quando pressiono a tecla

Olá, tudo bem pessoal? O projeto funciona perfeitamente mas fiquei intrigado quanto a um comportamento específico: se pressiono a tecla space o botão "afunda" (efeito da boxshadow + borda) assim como quando clico no botão, porém se eu pressionar a tecla enter, apesar de a classe "ativa" estar sendo inserida, o botão não realiza o mesmo efeito de borda, apenas fica vermelho e reproduz o som.

Acontece uma outra diferença também, quando eu seguro a tecla space o som só é reproduzido uma vez, enquanto que quando a tecla enter se mantém pressionada, o som fica se repetindo.

trecho do js:

for(let i=0; i <listaDeTeclas.length; i++) {
    const tecla = listaDeTeclas[i];
    const instrumento = tecla.classList[1];
    // template string
    const idAudio = `#som_${instrumento}`

    // console.log(instrumento);
    listaDeTeclas[i].onclick = function () {
        tocaSom(idAudio)
    };

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

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

}

trecho do css responsável:

.tecla.ativa,
.tecla:active {
  background-color: var(--vermelha);
  border: 4px solid  var(--vermelha);
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset;
  color: var(--branca);
  ou

Opa Ruan, como vai?

Pedimos desculpa pela demora em obter um retorno.

Ótima pergunta!

Por padrão certas teclas do teclado e até mesmo o mouse exercem certas atividades no nosso computador, o que acaba afetando o sombreamento e a repetição dos sons.

No caso do sombreamento, como por padrão a tecla espaço e o click do mouse efetuam uma ativação no computador, não precisamos especificar o seu uso. Esse caso não se encaixa para a tecla enter, que adicionamos manualmente para realizar a mesma ação de ativação por meio da classe ativa.

Contudo, como o estilo de sombreamento dos botões por padrão está configurado no style.css comoactive e não ativa, não temos o efeito desejado, como mostra o código abaixo:

.tecla.active:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz);
}

Para obter o resultado desejado alteramos o efeito de active na primeira linha. para ativa, assim adicionando o efeito de sombreamento para todos que receberem a classe:

.tecla.ativa:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz);
}

A repetição dos sons ocorre por outro comportamento, nesse caso o do enter, o enter confirma uma ação, esta tecla funciona replicando clicks contínuos do mouse em um intervalo mínimo de tempo, ou seja, é como se estivéssemos clicando sem parar no botão, confirmando sucessivamente uma mesma ação.

Caso não queria este comportamento no seu código, apresento um solução evitando que haja a repetição do som por meio de um contador e da função preventDefault().

Primeiramente criamos uma variável para o contador, ela se iniciará com o valor 0 e servirá como parâmetro para parar a ação:

let contadorDeEnter = 0;

Adicionaremos dentro do nosso if que implementa o uso de enter um outro if, este sendo responsável pelo aumento do nosso contador, dessa forma sempre que pressionarmos enter aumentaremos o valor do contador:

if(event.code === 'Enter' || event.code === 'NumpadEnter') {
   if(event.code === 'Enter') {
      contadorDeEnter++;

   }
   tecla.classList.add('ativa');

}

Agora para pararmos o processo adicionamos mais um if que vai ditar a condição para que a ação seja interrompida, nesse caso usaremos a função preventDefault(), responsável por parar um evento:

if (event.code === "Space" || event.code === "Enter") {
        if(event.code === 'Enter') {
             contadorDeEnter++;
             if (contadorDeEnter >= 2) { 
                     event.preventDefault(); 
             }
        }
        tecla.classList.add('ativa');
}

Por fim zeramos o nosso contador quando a tecla não estiver mais sendo pressionada:

tecla.onkeyup = function () {
        tecla.classList.remove('ativa');
        contadorDeEnter = 0;
}

Segue abaixo o código funcionando:

Caso precisar de ajuda estamos à disposição, conte conosco.

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓