Как использовать клавишу ввода для ввода имени пользователя и пароля

Question

У меня есть кнопка входа, которая работает нормально, она регистрирует пользователя и т. Д., Но я хочу позволить пользователю нажать клавишу ввода, чтобы войти в систему. Как я могу это сделать. Я пытался проверить с помощью onkeypress, но он не сделал ничего, как показано ниже

<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")}

так как я могу использовать клавишу ввода, чтобы отправить свой запрос в javascript и jquery

Answer 1

Как вы разместили input в пределах form элемент, который содержит кнопку отправки, вы получаете это поведение по умолчанию. Чтобы подключиться к нему, используйте submit событие формы, как это:

$('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>

Обратите внимание, что я исправил недостающее " после placeholder атрибут в первом input, Вам также не нужен завершающий пробел после всех значений атрибутов, поэтому я тоже удалил их.

Answer 2

Сначала вам нужно отправить событие на myFunction() Функция и добавить идентификатор в форму, чтобы добавить отправить вручную:

HTML

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

Теперь в ASCII код повторного ввода 13 все, что вам нужно проверить - это когда повторно нажата клавиша (13), вам нужно взять код клавиши события и вызвать функцию отправки:

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