Entrar Ainda não tem acesso?
1
resposta

Retorno incompleto do CSS ao apertar Enter

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Eventos e lógicas e atividade Operador lógico

por Estudante
| 102k xp | 8 posts

Ambos os botões estão funcionando, porém, a estilização do CSS está incompleta ao clicar em Enter não retornando o sombreamento interno do botão.

Space:

Com sombreamento ao apertar Space

Enter:

Sem sombreamento ao apertar Enter

Trecho do código Javascript:

tecla.onkeydown = function (evento) {

        if (evento.code === 'Space' || evento.code === 'Enter') {
            tecla.classList.add('ativa');
        }
    }

Trecho do CSS

.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);
  outline: none;
}
1 resposta
por GABRIEL DUPLA
| 684.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Olá Dev, como vai?

Pedimos desculpa pela demora em obter um retorno.

O box-shadow dos botões pressionado está em uma área diferente do código e por padrão está configurado por active e não ativa 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 active da primeira linha para que funcione quando adicionamos o efeitoativa:

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

Como a tecla espaço e o click do mouse funcionam por padrão em navegadores como Edge, Firefox e Chrome para efetuar uma ativação não precisamos especificar o uso, porém, como em outras teclas estamos adicionando esse efeito manualmente por meio da "ativa", precisamos indicar no CSS e interligar com o comando do javascript.

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 ✓