我如何使用回车键提交用户名和密码

Question

I have a login button that works fine,it logs a user in etc.. but i want to allow the user to press the enter key to login as well. how do i do this.I tried a test using onkeypress but it didnt do anything as bellow

<form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Username id="username" />
       </div>
      <div class="form-group">
      <input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
      </div>
     <div class="form-group">
   <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>

  </div>
  </div>
  </form>

function myFunction()
 { alert("button pressed")}

so how do i use the enter key to submit my request in javascript and jquery

Answer 1

As you've placed the input within a form element which contains a submit button, you get this behaviour by default. To hook to it, use the submit event of the form, like this:

 $('form').on('submit', function(e) { e.preventDefault(); // only used to stop the form submission in this example console.log('form submitted'); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Username" id=" username" /> </div> <div class="form-group "> <input type="password" class="form-control" placeholder="........" id="password" /> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button> </div> </form>

Note that I fixed the missing " after the placeholder attribute in the first input . You also don't need the trailing space after all the attribute values, so I removed those too.

Answer 2

First you need to send the Event to the myFunction() function and add ID to your form to add submit manually::

HTML

<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>

Now in ASCII the reenter code is 13 all you need to check is when the pressed key is reenter (13) then you need to take the event key code and call the submit function::

function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
   if (code == "13")
    {
        //Calling the submit or clicking manually it 
        $( "#myForm" ).submit();   
    }
}