@TechNOIR

JS. Как отправить input по нажатию Enter?

Добрый день.

Не срабатывает отправка из input по enter =(
<input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
<button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>


$('#sendtext').on('keydown', function(e) {
  if (e.which === 13) {
    buttonOtprav()
  }
})


Подскажите пожалуйста что не правильно сделал? Спасибо заранее!
  • Вопрос задан
  • 3436 просмотров
Решения вопроса 1
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Оберните формой и повесьте слушателя submit

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>
</form>


$('form').on('submit', event => {
  event.preventDeailt();
  ... // тут можно получить ответ от сервера, если ajax'ом сделать
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kulaeff
Front-end developer
Во-первых, у кнопки id="send", а подписываетесь вы почему-то на событие keydown элемента sendtext. Такого элемента не существует, потому и не срабатывает обработчик. Во-вторых, вы и инлайном вешаете обработчик и через селектор. Так не нужно делать. Как минимум потому, что это усложняет поддержку кода. Надо делать так:

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" class="controls-elements" type="submit">Отправить</button>
</form>


function buttonOtprav() {
  //...
}

$('#send').on('click', buttonOtprav)

$('#send').on('keydown', function(e) {
  if (e.which === 13) {
    buttonOtprav()
  }
})


Однако, если это возможно, воспользуйтесь лучше ответом Николай Шабалин.

PS: Не называйте функции и переменные транслитом, типа buttonOtprav, это как-то, имхо, не солидно. Назовите buttonSend.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы