7

jQuery событие Keypress: Как узнать, какая клавиша была нажата?

31

Как с помощью jQuery определить, какая клавиша была нажата, когда я привязываюсь к событию keypress?

$('#searchbox input').bind('keypress', function(e) {});

Я хочу вызвать отправку формы, когда нажимается ENTER.

[Обновление]

Хотя я сам нашел (или лучше сказать: один из) ответ, похоже, есть место для вариаций ;)

Существует ли разница между keyCode и which — особенно если я просто ищу ENTER, который никогда не будет кодом юникода?

Некоторые браузеры предоставляют одно свойство, а другие — другое?

5 ответ(ов)

8

На самом деле, это лучше:

var code = e.keyCode || e.which;
if (code == 13) { // Код клавиши Enter
  // Выполнить действие
}

Такой подход делает код более понятным и совместимым с различными браузерами, так как используется свойство which как запасной вариант для получения кода клавиши, если keyCode недоступен.

1

Попробуйте следующий код:

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode == 13) {
        // Нажата клавиша Enter... выполняйте необходимые действия здесь...
    }
});

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

0

Если вы используете jQuery, вам определенно стоит использовать свойство .which. Да, разные браузеры устанавливают разные свойства, но jQuery нормализует их и устанавливает значение .which в каждом случае. В документации по адресу http://api.jquery.com/keydown/ указано:

Чтобы определить, какая клавиша была нажата, мы можем изучить объект события, который передается функции обработчика. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство .which, так что мы можем надежно использовать его для получения кода клавиши.

0

В этом примере предотвращается отправка формы, что является основной целью при перехвате нажатия клавиши с кодом 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().

0

В приведённом вами коде 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".

Если у вас возникают дополнительные вопросы или нужны уточнения, не стесняйтесь спрашивать!

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь