События клавиатуры

Для обработки событий клавиатуры в jQuery предназначены следующие методы (элемент должен иметь фокус ввода):

keydown([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при нажатии клавиши клавиатуры. Событие генерируется постоянно, пока пользователь не отпустит клавишу;
keypress([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при нажатии символьных клавиш клавиатуры. Аналогичен методу keydown(), но возвращается значение кода символа в кодировке Unicode. Событие генерируется постоянно, пока пользователь не отпустит клавишу;
keyup([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при отпускании ранее нажатой клавиши клавиатуры.

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Объект event>]) {
   // ...
}

Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event. Получить информацию о событии клавиатуры позволяют следующие свойства:

which — код нажатой клавиши. Содержит нормализованное значение свойств keyCode и charCode;
keyCode — код нажатой клавиши. В Web-браузере Firefox при нажатии обычной клавиши в обработчике события onkeypress свойство keyCode имеет значение 0, а код символа доступен через свойство charCode. Если нажата только функциональная клавиша, то ситуация другая — свойство charCode имеет значение 0, а код символа доступен через свойство keyCode;
key — строка с буквой или описанием клавиши (например, "ArrowDown");
shiftKey — true, если была нажата клавиша <Shift>;
ctrlKey — true, если была нажата клавиша <Ctrl>;
altKey — true, если была нажата клавиша <Alt>;
metaKey — true, если была нажата клавиша <Meta>.

В качестве примера получим код нажатой клавиши и продемонстрируем последовательность прохождения событий (листинг 1.13).

Листинг 1.13. События клавиатуры

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>События клавиатуры</title>
</head>
<body>
<div class="container my-3">
   <input type="text" class="form-control" id="txt1" autofocus>
   <div id="log"></div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#txt1')
      .keydown( function(e) {
         $('#log').append('keydown ' + e.which + '<br>');
      })
      .keypress( function(e) {
         $('#log').append('keypress ' + e.which + '<br>');
      })
      .keyup( function(e) {
         $('#log').append('keyup ' + e.which + '<br>');
      });
});
</script>
</body>
</html>

Выделите текстовое поле и нажмите какую-либо клавишу на клавиатуре. Например, нажмем клавишу <а> при русской раскладке клавиатуры. В итоге получим следующее сообщение:

keydown 70
keypress 1072
keyup 70

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов