Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
26 Фев 2023
2 мин
2297

Запуск события нажатия кнопки при нажатии клавиши Enter в текстовом поле с помощью JavaScript

Проблема Часто возникают ситуации, когда на веб-странице есть текстовое поле и кнопка. Требуется, чтобы при нажатии клавиши Enter в этом текстовом поле

Проблема

Часто возникают ситуации, когда на веб-странице есть текстовое поле и кнопка. Требуется, чтобы при нажатии клавиши Enter в этом текстовом поле происходило событие нажатия этой кнопки. Возьмем для примера текстовое поле для поиска и кнопку «Поиск».

<input type="text" id="searchField" />
<input type="button" id="searchButton" value="Поиск" onclick="searchSomething();" />

Решение

Существует несколько способов реализации такого поведения в JavaScript. Один из них — использование обработчика событий. Сначала, необходимо получить доступ к элементам страницы, в данном случае, текстовому полю и кнопке:

var searchField = document.getElementById('searchField');
var searchButton = document.getElementById('searchButton');

Затем, можно добавить обработчик события ‘keypress’ к текстовому полю. В этом обработчике проверяется, была ли нажата клавиша Enter (ее код — 13), и если была, то запускается событие click для кнопки:

searchField.addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    if (key === 13) { // код клавиши Enter
        searchButton.click();
    }
});

Когда пользователь нажимает клавишу Enter в текстовом поле, вызывается функция обработчика. В этой функции производится проверка, является ли нажатая клавиша клавишей Enter. Если это так, то вызывается метод click() у кнопки, что инициирует событие клика по кнопке.

Таким образом, приведенный выше код позволяет реализовать требуемое поведение: при нажатии клавиши Enter в текстовом поле происходит «клик» по кнопке.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

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