Olá Willian, 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(evento.code === 'Enter' || evento.code === 'NumpadEnter') {
if(evento.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(evento.code === 'Enter' || evento.code === 'NumpadEnter') {
if(evento.code === 'Enter') {
contadorDeEnter++;
if (contadorDeEnter >= 2) {
evento.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 ✓
