Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
События клавиатуры
Для обработки событий клавиатуры в 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
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов