Як зловити подія натискання Enter у полі input

31.12.2021

325

Від автора: цей простий шматочок коду демонструє, як перехопити значення текстового поля при натисканні клавіші Enter у vanilla JS і JQuery.

Вступ

Кілька тижнів тому мій друг попросив розібратися з маленькою проблемою. Йому було потрібно захопити значення текстового поля кожен раз, коли користувач в нього щось вводить і натискає на клавішу Enter. З такими сучасними фреймворками як Angular і React це пустячное справу, так як в них вбудована прив’язка даних. Звичайно ж, ніхто не пішов по такому шляху. До щастя і без даних фреймворків код виявився дуже простий. Нижче я представив два шматочки коду – перший на JS, другий на JQuery. В основі обох лежить визначення текстового поля:

Сниппет

Наш сніппет (або по-російськи маленький шматочок коду) просто каже: Відстежуємо натискання клавіші у текстовому полі, і якщо це Enter (тобто код клавіші 13), в консоль виводимо значення текстового поля. Перший на JS:

(function() {
if (e.keyCode === 13) {
// можете робити все що завгодно зі значенням текстового поля
console.log(this.value);
}
});
})();

І другий на JQuery:

$(document).ready(function() {
$(‘input’).натискання(function(e) {
if(e.keyCode === 13) {
// можете робити все що завгодно зі значенням текстового поля console.log($(this).val());
}
});
});