Jquery, javascript. Событие по нажатии двух клавиш клавиатуры

2011-06-15 11:00:00

Представьте, что вы разрабатываете движок для сайта с админкой. На сайте нет понятия "регистрация" и зарегистрированные пользователи. Царь и бог на нем только один - бородатый и бухой админ. Как бы вы сделали авторизацию для администратора сайта. Предусмотрели бы линк по типу http://адрес_сайта/admin ? Меня этот вариант не устроил. Я решил сделать невидимый блок с формой авторизация, который становится видимым при нажатии сочетания двух клавиш на клавиатуре. Передомной встала задача написать обработчик на Jquery и javascript. В статье опишу реализацию обработчика событий на javascript и jquery.

Принимая в расчет популярность библиотеки jquery - начнем реализуацию ее методами. По моей задумке функция переключения тригера "показать/скрыть форму". Стоит избегать таких сочетаний клавиш как ctrl+c/v/x. В своем примере я обрабатываю нажатие клавиш ctrl+q. Нам потребуется узнать коды клавиш. Позже я выложу таблицу с кодами клавиш. Итак, вот код реализации моей задумки:

var isCtrl = false;
$(document).keyup(function (e) {

	if(e.which == 17) isCtrl=false;
}).keydown(function (e) {

	if(e.which == 17) isCtrl=true;
	if(e.which == 81 && isCtrl == true) {

		if ($('#adminblock').css('display') == 'none'){
			$('#adminblock').show();

			document.cookie="apanel=1; expires=Mon, 01-Jan-2021 00:00:00 GMT";
		} else{
			$('#adminblock').hide();

			document.cookie="apanel=0; expires=Mon, 01-Jan-2021 00:00:00 GMT";
		}
		return false;
	}

});

Используя методы keydown() и keyup() мы отслеживаем нужные нам события, проверяем коды клавиш и запускаем определенные функцие: либо show(), либо hide() Так же я устанавливаю переменные куки. Делаю это для того, чтобы запоминать текущее положение тригера и подставлять его при переходе на другую страницу сайта.

Реализовать подобное на javascript можно следующим образом:

function ctrly(event, formElem){
	if(event.ctrlKey && event.keyCode == 81 {

        formElem.submit.click();
    }
}

Я рекомендую использовать вариант с jquery в виду кроссбаузерности этой библиотеки.