Как вызвать события при нажатия на кнопку enter?

Question

[Alisa94]

Есть поле ввода имени и пароля, а также кнопка входа. После ввода правильного пароля и имени нужно, чтобы нажатие на кнопку enter вызывала функцию входа на сайт, а если введённый пароль или имя неправильные, то выводилось сообщение об ошибке ввода. Событие нажатие на enter должна срабатывать вне зависимости от того в каком поле находиться курсов и вне зависимости от того пользователь ввёл данные или нет. Реализовать надо с помощью чистого JS. Заранее спасибо.

<form>
  <div class="group">
    <input type="text" id="Name">
    <label>Name</label>
  </div>
  <div class="group">
    <input type="password" id="Pass">
    <label>Password</label>
  </div>
  <button type="button">Log In</button>
</form>

Comments

[Павел Корнилов]

Ответ уже дан, но всё же, может пригодиться.
https://codepen.io/KorniloFF/pen/LqPyLL?editors=1010

Answer 1

[Ильдус Сираев]

Нужно вызывать событие onkeypress

<input name="text" type="text" id="textid" onkeypress="handleKeyPress(event)">

Обработчик

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key === 13){ // Клавиша Enter
     doSomething();
  }
}

Comments

[Alisa94]

Спасибо братан, мы это уже решили другим способом, но этот вариант тоже попробую.

Answer 2

[Юпитер Макс]

у кнопки enter числовой код = 13 вешаете на него событие нажатия при этом отправляя данные на сервер через ajax, а там в обработчике php (так же можно и на стороне клиента проверить поля на пустоту, при нажатии) делаете какой-то ответ и с помощью json отправляете назад. Соответственно при нажатии на enter проверяете, что приходит от сервера. Если приходит норма, отправляете, если приходит ошибка выводите сообщение о ней.

Это как пример логики

Comments

[Alisa94]

А можно поподробнее?

Answer 3

[Андрей Охотников]

<button type="submit">Log In</button>

И укажи в теге форм action="ссылка на скрипт".
Используй метод fetch для отправки данных на сервер, далее сервер тебе вернут либо ошибку либо юзера

Comments

[Alisa94]

А можно поподробнее?

[Андрей Охотников]

Alisa94, https://learn.javascript.ru/fetch

[Alisa94]

Андрей Охотников, и как это связать с моей задачей?