Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

No Número secreto, como habilitar a tecla Enter para servir como um clique no botão Chutar?

Olá! Terminei o meu projeto, agora estou otimizando com base na participação dos outros colegas (como o Kelson e a Daniela). Mas uma coisa está me incomodando e não vi ninguém comentar.

Eu uso muito o teclado e gostaria de simplesmente digitar meu palpite e apertar Enter, em vez de clicar no botão Chutar com o mouse. Não só pela minha preguiça de esticar a mão, mas também é uma questão de acessibilidade, usabilidade e interface.

Alguém pode explicar como fazer isso, por favor?

Obrigado desde já!

3 respostas
solução!
document.getElementById("palpite").addEventListener("keyup", function(event) {
    // 13 é o código da tecla "Enter"
    if (event.keyCode === 13) {
        event.preventDefault(); // Impede o comportamento padrão do Enter (como quebrar linhas em uma caixa de texto)
        chutar(); // Chama a função que você deseja executar ao pressionar "Enter"
    }
});

function chutar() {
    // Aqui você coloca o código que deseja executar quando o usuário pressionar "Enter" ou clicar no botão "Chutar"
    var palpite = document.getElementById("palpite").value;
    console.log("Palpite: " + palpite);
    // Adicione o restante do seu código aqui...
}

Não funcionou. Coisas que fiz para tentar solucionar:

  • adicionei id="palpite" à caixa de texto;
  • troquei event.keyCode (li na documentação que está obsoleto) por KeyboardEvent.code;
  • coloquei a função chutar()—na verdade, verificarChute() em cima, para não dar conflito;
  • tentei com a sua atribuição da variável palpite— na verdade, chute e com a que eu já tinha;
  • tentei com 13, com o valor hexadecimal para Windows, Mac e Linux. É como se não estivesse apertando nada, nem sai no console.log.

index.html:

<input type="number" id="palpite" min="1" max="100" class="containerinput">

app.js:

function verificarChute() {
    //let chute = parseInt(document.querySelector("input").value);
    var chute = parseInt(document.getElementById("palpite").value);

    // restante do código
}

document.getElementById("palpite").addEventListener("keyup", function(event) {
    if (KeyboardEvent.code == 13) {
        console.log("Enter pressionado!");
        event.preventDefault(); // Impede o comportamento padrão do Enter (como quebrar linhas em uma caixa de texto)
        verificarChute();
    }
});

Resolvido! Depois de quebrar a cabeça, consegui com event.key. Outras tentativas identificavam o campo de texto e a tecla, mas não faziam nada. Apenas com event.key funcionou.

Viva a documentação! Muito obrigado, Estudante!