Отслеживание нажатия клавиш в JQUERY и JAVASCRIPT

Чтобы повысить продуктивность работы, повысить удобство пользования различных веб приложениях или скриптов, нужно управлять не только мышкой и стандартным набором клавиш, но и запускать нужные функции с помощью специальных сочетаний клавиш на клавиатуре. Методы расширения рабочего функционала клавиатуры позволят сэкономить уйму времени в работе. Пример такой: вы добавляете регулярно статьи на свой сайт, статьи с картинками. И если реализовать вставку картинок в текст с помощью сочетания клавиш или клавиши, то трудоемкость добавления статей на сайт упадет на достаточное количество пунктов, сэкономив силы и время.
Пример «отлова» нажатия клавиш на javascript:

<html>
<head>
<title>Отслеживание нажатия клавиш на JAVASCRIPT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<script language="javascript" type="text/javascript">
	document.onkeydown = function checkKeycode(event)
	{
		var keycode;
		if(!event) var event = window.event;
		if (event.keyCode) keycode = event.keyCode; // для IE
		else if(event.which) keycode = event.which; // для всех браузеров
		alert("keycode: "+keycode); // Выводим сообщение
		// Тут можно написать функции при нажатии нужных клавиш
	}
</script>

</body>
</html>

Устанавливать скрипт можно отдельным файлом или прописать в конце кода перед закрывающимся тегом BODY. Теперь вы можете отлавливать коды в переменной «keycode» и по совпадению выполнять ту или иную функцию. Сочетания клавиш, заданное в скрипте имеет приоритет к горячим клавишам браузера. Это значит, что если заданное вами сочетание будет совпадать с горячими клавишами команд браузера, то команды скрипта будут выполняться в первую очередь, а функции горячих клавиш браузера будут блокированы.

Пример «отлова» нажатия клавиш на jquery с примером «отлова» нажатия сочетания клавиш «Ctrl+q»:

<html>
<head>
<title>Отслеживание нажатия клавиш в JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
	$('html').keydown(function(eventObject){ //отлавливаем нажатие клавиш
		if (event.ctrlKey && event.keyCode == 81) { //если нажали Ctrl+q
			alert('Вы нажали Ctrl+q');// Выводим сообщение
	  }
	});
</script>

</body>
</html>

При использовании этого варианта не забудьте подключить библиотеку jquery любым удобным для вас с способом.
Все примеры очень просты в реализации. И ещё раз хочу подчеркнуть, как использование запуска нужных функций с клавиатуры может облегчить жизнь вебмастеру, особенно встречающихся часто с рутиной работой.
Также, кроме запуска функций данный скрипт может быть использован для блокировки нежелательного нажатия определенных клавиш.
Коды клавиш для всех примеров вы можете скачать ниже.

code.zip [4,5 Kb] (cкачиваний: 138)

Не нравится

Нравится

+99