Enable input with enter key

Asked

Viewed 30 times

0

Good afternoon, esotu trying to create a login system and to enter the system by clicking the enter key on the keyboard, ends up redirecting to my "forgot my password" besides activating the key "enter".

I change the forgotten password to "button" works, but it breaks something else. I need you both to be like "Ubmit and I can activate the login button by clicking enter on the keyboard

follows the code:

<div class="row">
                                                <div class="col-12">
                                                   
                                                    <div class="form-group" style="padding-left: 9%; margin-top: 1%">
                                                        <button class="btn btn-link" id="btnSenha" data-toggle="modal" onserverclick="btnSenha_click" runat="server" type="submit"><strong>Esqueci minha senha</strong></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="text-center" style="padding-bottom: 5%; width: 90%; padding-left: 9%">
                                                        <div class="form-group">
                                                            <button class="btn btn-primary btn-lg" onserverclick="ImageAcessar_Click" id="ImageAcessar" runat="server" type="submit"><strong>Entrar</strong></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
java jquery function keyboard

2 answers

1

To recover the enter event on the keyboard you can use something like the code below:

document.querySelector("#botao").addEventListener("evento", handler)

var keyCode = ''
function handler(event) {
    keyCode = event.keyCode || event.which
    if(keyCode == 13) {
       console.log('pressionei o enter')
    }
})

each button you could retrieve with ajax and launch two distinct events from Submit

  • could you ride for me? I’m weak in javacript do not understand much.

  • of course, I will send an example that I built

-1

I made a basic example for a button, you can replicate to each other the same way, follow the html code of example:

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
</head>

<body>
  <textarea id="nome"></textarea>
  <button type="submit" name="btn_entrar">Entrar</button>
</body>

</html>

The JS looks like this, wherever the comment //replace is by the function you want to use just add the form’s Submit function with ajax.

$(function() {

  $('button[name="btn_entrar"]').click(function() {
    alert('testando ...!');
    //substituir pela função que pretende usar | o ultimo código dessa resposta entra aqui
  });

  $('#nome').keypress(function(e) {
    var key = e.which;
    if (key == 13) // enter
    {
      $('button[name = btn_entrar]').click();
      return false;
    }
  });

});

the function to send the form would look something like this

 $("form").on("submit", function(event){
        event.preventDefault();

        $.ajax({
         url: '/entrar',
         type: 'POST',
         data: $(this).serialize()
         }).done(function (response) {
         
           //fazer algo com o retorno
         })
 
        
    });

Browser other questions tagged java jquery function keyboard

You are not signed in. Login or sign up in order to post.