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

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

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

Вступление

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

Сниппет

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

И второй на JQuery:

Заключение

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

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree