Проблема
Часто возникают ситуации, когда на веб-странице есть текстовое поле и кнопка. Требуется, чтобы при нажатии клавиши 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 в текстовом поле происходит «клик» по кнопке.
Добавить комментарий