1
resposta

Como faço para utilizar a tecla "Enter" com a mesma função do button.onclick?

Olá pessoal!

A minha curiosidade é a seguinte, já observei que em vários sites e aplicações a tecla enter também submete algumas respostas e interações do usuário tal qual o button.onclick, gostaria de saber qual é a função do Javascript que me permita colocar em meu código essa possibilidade onde após inserir a informação o usuário tanto possa apertar o enter quanto clicar.

1 resposta

Oi, Ednirli, como vai?

Sinto muito pela demora em retornar.

Esse comportamento é padrão dos formulários feitos com HTML5. Entretanto, é possível simular com JavaScript, adicionando um ouvinte de eventos que executará uma função quando a tecla enter for pressionada.

O código ficará assim:

<meta charset="UTF-8">

<button>Clique-me</button>

<script>

  function tchau() {
    alert("Tchau!!!!!")
  }

  var button = document.querySelector("button");
  button.addEventListener('keypress', function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      tchau();
    }
  });

</script>

Então, foi preciso adicionar um ouvinte de eventos no botão que ficará responsável por "escutar" quando a tecla enter for pressionada. Cada tecla possui um código identificador, o código da tecla enter é 13, então quando um evento acontecer com o código 13 quer dizer que a tecla enter foi pressionada, e se isso acontecer nós temos uma condição para executar a função tchau().

Espero ter ajudado.

Abraços e bons estudos!