Как отследить нажатие клавиш JQuery?

В событиях – keydown(), keyup(), keypress() можно получить нажатые клавиши в шести свойствах. Получить их можно из объекта события:

$(document).keyup(function(e) {
	console.dir(e);
});
JS

Результат нажатия клавиши р:

Результат нажатия клавиши р
  • key – содержит символ нажатой клавиши,
  • keyCode – код клавиши (не зависит от регистра и раскладки клавиатуры).

С помощью них можно отследить одну нажатую клавишу:

$(document).keyup(function(e) {
	$('#result').append(e.key + ', код: ' + e.keyCode + '<br>');
	console.dir(e);
});
JS
1

На основе кодов можно повесить обработчики на определенные клавиши.

Клавиша Esc:

$(document).keyup(function(e) {
	if (e.key === "Escape" || e.keyCode === 27) {
		alert('Нажата клавиша Escape');
	}
});
JS

Клавиша Backspace:

$(document).keyup(function(e) {
	if (e.key === "Backspace" || e.keyCode === 8) {
		alert('Нажата клавиша Backspace');
	}
});
JS
2

Следующие свойства показывают состояния управляющих клавиш (true/false):

  • ctrlKey – нажат ли Ctrl,
  • altKey – нажат ли Alt,
  • metaKey – нажат ли Win или cmd,
  • shiftKey– нажат ли Shift.

Примеры отслеживания комбинации клавиш:

Ctrl + стрелки ← →:

$(document).keyup(function(e) {
	if (e.ctrlKey && e.keyCode === 37) {
		alert('Нажаты Ctrl и ←');
	}
	if (e.ctrlKey && e.keyCode === 39) {
		alert('Нажаты Ctrl и →');
	}
});
JS

Alt + Буква:

$(document).keyup(function(e) {
	if (e.altKey && e.keyCode === 67) {
		alert('Нажаты Alt и C');
	}
});
JS

Ctrl + Shift + Пробел:

$(document).keyup(function(e) {
	if (e.ctrlKey && e.shiftKey && e.keyCode === 32) {
		alert('Нажаты Ctrl, Shift и пробел');
	}
});
JS
22.10.2019, обновлено 17.12.2020
18105

Комментарии

, чтобы добавить комментарий.

Другие публикации

Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60894
+7
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
68379
+23
Local Storage и Session Storage в JavaScript
Web Storage API это набор методов, при помощи которых в браузере можно хранить данные в виде пар ключ=значение на...
14969
+3
Появление элемента в области просмотра браузера
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
47444
+14
Горячие клавиши Google Chrome
Список сочетаний клавиш, которые можно использовать в Google Chrome для Windows и MacOS.
8024
+1
Меню-подсказка на затемненном фоне
Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со...
5718
-1