От автора: этот простой кусочек кода демонстрирует, как перехватить значение текстового поля при нажатии клавиши Enter – в vanilla JS и JQuery.
Вступление
Пару недель назад мой друг попросил разобраться с маленькой проблемой. Ему было нужно захватить значение текстового поля каждый раз, когда пользователь в него что-то вводит и нажимает на Enter. С такими современными фреймворками как Angular и React это пустячное дело, так как в них встроена привязка данных. Конечно же, никто не пошел по такому пути. К счастью и без данных фреймворков код оказался очень прост. Ниже я представил два кусочка кода – первый на JS, второй на JQuery. В основе обоих лежит определение текстового поля:
|
1 |
<input type="text"> |
Сниппет
Наш сниппет (или по-русски маленький кусочек кода) просто говорит: Отслеживаем нажатие клавиши в текстовом поле, и если это Enter (т.е. код клавиши 13), в консоль выводим значение текстового поля. Первый на JS:
|
1 2 3 4 5 6 7 8 |
(function() { document.querySelector('input').addEventListener('keydown', function(e) { if (e.keyCode === 13) { // можете делать все что угодно со значением текстового поля console.log(this.value); } }); })(); |
И второй на JQuery:
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('input').keydown(function(e) { if(e.keyCode === 13) { // можете делать все что угодно со значением текстового поля console.log($(this).val()); } }); }); |
Заключение
А вот и заключение! Надеюсь, данные сниппеты пригодились вам или пригодятся в ваших будущих начинаниях. Спасибо за то, что дочитали до конца.
Источник: //callmenick.com/
Редакция: Команда webformyself.
Комментарии (3)