Перейти в телеграм, чтобы получить результаты теста
Проблема
Часто возникают ситуации, когда на веб-странице есть текстовое поле и кнопка. Требуется, чтобы при нажатии клавиши Enter в этом текстовом поле происходило событие нажатия этой кнопки. Возьмем для примера текстовое поле для поиска и кнопку «Поиск».
<input type="text" id="searchField" />
<input type="button" id="searchButton" value="Поиск" onclick="searchSomething();" />
Решение
Существует несколько способов реализации такого поведения в JavaScript. Один из них — использование обработчика событий. Сначала, необходимо получить доступ к элементам страницы, в данном случае, текстовому полю и кнопке:
1 2 | var searchField = document.getElementById('searchField');var searchButton = document.getElementById('searchButton'); |
Затем, можно добавить обработчик события ‘keypress’ к текстовому полю. В этом обработчике проверяется, была ли нажата клавиша Enter (ее код — 13), и если была, то запускается событие click для кнопки:
1 2 3 4 5 6 | searchField.addEventListener('keypress', function (e) { var key = e.which || e.keyCode; if (key === 13) { // код клавиши Enter searchButton.click(); }}); |
Когда пользователь нажимает клавишу Enter в текстовом поле, вызывается функция обработчика. В этой функции производится проверка, является ли нажатая клавиша клавишей Enter. Если это так, то вызывается метод click() у кнопки, что инициирует событие клика по кнопке.
Таким образом, приведенный выше код позволяет реализовать требуемое поведение: при нажатии клавиши Enter в текстовом поле происходит «клик» по кнопке.
Добавить комментарий