Solucionado
const digitos = document.querySelectorAll('input[type=button]');
const entrada = document.querySelector('input[type=tel]');
for (let i = 0; i < digitos.length; i++){
const tecla = digitos[i];
tecla.onclick = function() {
entrada.value += tecla.value;
}
tecla.onkeydown = function(event) {
if (event.code === 'space' || event.code === 'enter') {
tecla.classlist.add('ativa');
}
tecla.onkeyup = function() {
tecla.classlist.remove('ativa');
}
}
}
Olá, Kati.
Tudo bem?
Muito obrigado por compartilhar o seu desafio com a gente. Ficou muito bom! É isso ai, a prática é muito importante para o desenvolvimento e evolução, não deixe de fazer os desafios exercícios :)
Valeu. Precisar de ajuda conta com a gente.
Eu consegui fazer, e tentei colocar para mudar as classes no evento de onmousedown e onmouseup, não sei se ficou muito bom, mas consegui hehe...
const teclado = document.querySelectorAll('[type=button]');
const telefone = document.querySelector('[type=tel]');
for(let i = 0; i < teclado.length; i++){
const tecla = teclado[i];
//mouse events
tecla.onclick = function () {
telefone.value += tecla.value;
}
tecla.onmousedown = function (){
tecla.classList.add('ativa');
}
tecla.onmouseup = function () {
teclado[i].classList.remove('ativa');
}
//keyboard events
tecla.onkeydown = function (evento) {
if(evento.code === 'Space' || evento.code === 'Enter'){
tecla.classList.add('ativa');
}
}
tecla.onkeyup = function () {
teclado[i].classList.remove('ativa');
}
}Ficou muito bom, e funcionou!! Parabéns.