jQuery событие Keypress: Как узнать, какая клавиша была нажата?
Как с помощью jQuery определить, какая клавиша была нажата, когда я привязываюсь к событию keypress?
$('#searchbox input').bind('keypress', function(e) {});
Я хочу вызвать отправку формы, когда нажимается ENTER.
[Обновление]
Хотя я сам нашел (или лучше сказать: один из) ответ, похоже, есть место для вариаций ;)
Существует ли разница между keyCode
и which
— особенно если я просто ищу ENTER, который никогда не будет кодом юникода?
Некоторые браузеры предоставляют одно свойство, а другие — другое?
5 ответ(ов)
На самом деле, это лучше:
var code = e.keyCode || e.which;
if (code == 13) { // Код клавиши Enter
// Выполнить действие
}
Такой подход делает код более понятным и совместимым с различными браузерами, так как используется свойство which
как запасной вариант для получения кода клавиши, если keyCode
недоступен.
Попробуйте следующий код:
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode == 13) {
// Нажата клавиша Enter... выполняйте необходимые действия здесь...
}
});
В этом примере мы используем метод bind
для привязки обработчика событий к полю ввода. Когда пользователь нажимает клавишу Enter (код клавиши 13), вы можете выполнять любые действия внутри блока условия.
Если вы используете jQuery, вам определенно стоит использовать свойство .which
. Да, разные браузеры устанавливают разные свойства, но jQuery нормализует их и устанавливает значение .which
в каждом случае. В документации по адресу http://api.jquery.com/keydown/ указано:
Чтобы определить, какая клавиша была нажата, мы можем изучить объект события, который передается функции обработчика. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство
.which
, так что мы можем надежно использовать его для получения кода клавиши.
В этом примере предотвращается отправка формы, что является основной целью при перехвате нажатия клавиши с кодом 13 (Enter):
$('input#search').keypress(function(e) {
if (e.which == '13') {
e.preventDefault();
doSomethingWith(this.value);
}
});
Код использует jQuery для добавления обработчика события keypress
к полю ввода с ID search
. Когда пользователь нажимает клавишу Enter (код 13), срабатывает условие, вызывается метод e.preventDefault()
, который предотвращает стандартное поведение браузера (в данном случае — отправку формы). После этого можно выполнить любую нужную операцию, например, обработать введённое значение с помощью функции doSomethingWith()
.
В приведённом вами коде jQuery используется для обработки события нажатия клавиш (keypress). В частности, код проверяет, была ли нажата клавиша "Enter" (код клавиши 13).
В самом начале есть блок, который устанавливает свойство event.which
, если оно не определено. Это нужно для обеспечения совместимости с различными браузерами. То есть, если event.which
не установлено, оно будет присвоено значение event.charCode
или event.keyCode
.
Напомню, что чтобы реализовать обработку нажатия клавиш, вы можете использовать следующий код:
$('#searchbox input').bind('keypress', function(e) {
if (e.which === 13) { // Проверяем, была ли нажата клавиша Enter
alert('ENTER WAS PRESSED');
}
});
Здесь мы вешаем обработчик события keypress
на элемент ввода в поисковой строке с id searchbox
. Если пользователь нажимает клавишу Enter, будет вызвано всплывающее окно с сообщением "ENTER WAS PRESSED".
Если у вас возникают дополнительные вопросы или нужны уточнения, не стесняйтесь спрашивать!
Событие клика не работает на динамически созданных элементах
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
Как определить нажатие клавиши Esc?
Как получить данные формы с помощью JavaScript/jQuery?