Как поймать событие нажатия Enter в поле input

Как поймать событие нажатия Enter в поле input

От автора: этот простой кусочек кода демонстрирует, как перехватить значение текстового поля при нажатии клавиши Enter – в vanilla JS и JQuery.

Вступление

Пару недель назад мой друг попросил разобраться с маленькой проблемой. Ему было нужно захватить значение текстового поля каждый раз, когда пользователь в него что-то вводит и нажимает на Enter. С такими современными фреймворками как Angular и React это пустячное дело, так как в них встроена привязка данных. Конечно же, никто не пошел по такому пути. К счастью и без данных фреймворков код оказался очень прост. Ниже я представил два кусочка кода – первый на JS, второй на JQuery. В основе обоих лежит определение текстового поля:

<input type="text">

Сниппет

Наш сниппет (или по-русски маленький кусочек кода) просто говорит: Отслеживаем нажатие клавиши в текстовом поле, и если это Enter (т.е. код клавиши 13), в консоль выводим значение текстового поля. Первый на JS:

(function() {
  document.querySelector('input').addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
      // можете делать все что угодно со значением текстового поля
      console.log(this.value);
    }
  });
})();

И второй на JQuery:

$(document).ready(function() {
  $('input').keydown(function(e) {
    if(e.keyCode === 13) {
      // можете делать все что угодно со значением текстового поля console.log($(this).val());
    }
  });
});

Заключение

А вот и заключение! Надеюсь, данные сниппеты пригодились вам или пригодятся в ваших будущих начинаниях. Спасибо за то, что дочитали до конца.

Источник: http://callmenick.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree