1
resposta

Valores no input tel

Olá. Estou com algumas dificuldades em como integrar o button e atribuir o seu valor quando clicado usado a tecla espaço ou enter. Como faço pra pegar o valor do button ou onclick e colocar no input tel? Consegui fazer a lista que percorre todo o índica button, mas não consigo resgatar o valor e colocar na input tel. Além disso, como faço pra atribuir um classList no type button?

Meu js está assim no momento:

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

for(let contador = 0; contador <eventoTecla.length; contador++){

    const tecla = eventoTecla[contador];

     tecla.onclick = function() {
     }
}

tecla.onkeydown = function(evento){
    if(evento === 'Space' || evento === 'Enter'){
        tecla.classList.add('ativa');
    }
}
1 resposta

Oi, Afrânio, tudo bem?

A primeira coisa que devemos corrigir no seu código é que, no final, você colocou o código da função do evento onkeydown fora do bloco for. Se ele ficar fora, o javascript não vai entender de onde vem a referência tecla. Vamos colocar o código dentro do bloco for, antes do fechamento de sua chave:

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

for(let contador = 0; contador <eventoTecla.length; contador++){

    const tecla = eventoTecla[contador];

     tecla.onclick = function() {
     }

    // agora esse código está dentro do bloco for
    tecla.onkeydown = function(evento){
        if(evento === 'Space' || evento === 'Enter'){
            tecla.classList.add('ativa');
        }
    }
}

Feito isso, a outra coisa a se corrigir é a condição do bloco if. Em vez de escrever evento === 'Space', devemos escrever evento.code === 'Space'. Da mesma forma, devemos alterar evento === 'Enter' para evento.code === 'Enter'.

Isso porque evento irá possuir, nesse caso, várias informações do evento onkeydown, mas estamos interessados apenas no código da tecla pressionada, e para isso escrevemos evento.code.

Para o restante da solução, já te respondi neste tópico!

Abraços e bons estudos :)