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

Клавиатура один из самых важных девайсов во взаимоотношениях с пользователем. Попробуем разобраться как можно отследить что именно нажимает пользователь. Эти навыки пригодятся при построении «необычных» веб интерфейсов.

Клавиатура в состоянии сгенерировать три события: onKeyDown, onKeyUp и onKeyPress.

OnKeyDown

Срабатывает во время нажатия нажатия клавиши. Событие низшего уровня — реагирует на нажатие любой клавиши на клавиатуре (вплоть до медиаклавиш). Возвращает код нажатой клавиши.

Для нестандартных клавиш, вроде медиа, будет возвращаться бессмысленный код (255) или же событие может не сработать.

OnKeyUp

Срабатывает во время отпускания клавиши. В остальном событие аналогично keydown.

OnKeyPress

Срабатывает во время нажатия клавиши.

Заметка

Это событие должно срабатывать только по нажатию символов, имеющих ASCII код. Но в реальности разные браузеры по разному реагируют на это событие: IE и Chrome работают как и планировалось — нет реакции на клавиши, не имеющие ASCII кода. Firefox и Opera же реагируют на такие клавиши, при чем по разному: FF возвращает для таких 0, а Opera код клавиши аналогичный keyUp/keyDown.

KeyPress возвращает ASCII код нажатого символа. Это значит, что событие вернет разные коды, если пользователь нажал по букве "а", или "А", или "f", несмотря на то, что на клавиатуре это одна и та же кнопка. Т.е. это событие учитывает регистр символа, языковую раскладку, состояние клавиш Shift, Caps Lock, Alt, Ctrl. Можно сказать, что это более «интеллектуальное» событие по сравнению с keyDown/keyUp.

Заметка

Хоть onKeyPress и учитывает состояние Shift, Caps Lock, Alt, Ctrl, т.к. они влияют на то как и какой именно отобразится символ, но с помощью этого события нельзя определить состояние этих клавиш. Для этого нужно использовать keyUp/keyDown.

Узнаем больше о событии

Любое событие возвращает объект Event, который содержит дополнительную информацию о произошедшем событии. Для корректной кроссбраузерной обработки этого объекта используем такое условие:

if(!event) var event = window.event;

keyCode или keyChar

Два простых и похожих свойства: keyCode возвращает код нажатой клавиши, keyChar — ASCII код нажатого символа. Как понимаешь, при нажатии одной клавиши, значения этих свойств должны отличаться.

IE и Opera не поддерживают keyChar. Едиственный способ получить ASCII код символа — это использовать keyCode для событие onKeyPress.

Как узнать какая клавиша нажата

Узнать числовой код нажатой клавиши поможет свойство which, а для тех браузеров, которые с ним незнакомы — keyCode.

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; // all browsers
	alert("keycode: "+keycode);
}

Демо пример. Кто читал внимательно уже догадался, что для определения нажатой клавиши подходят только события onKeyUp/onKeyDown.

Заметка

event — это не обязательно обозначение объекта Event. Можно использовать любое имя, многие используют e или ev.

Как узнать какой символ нажат

Для этого предназначен метод String.fromCharCode. Чтобы полученный код был верным во всех браузерах, приходится анализировать только событие onKeyPress.

document.onkeypress = function checkKeycode(event)
{
	var keycode, keyChar;
	if(!event) var event = window.event;
	if (event.keyCode) keycode = event.keyCode;
	else if(event.which) keycode = event.which;
	keyChar=String.fromCharCode(keycode);
	alert("Нажат символ: "+keyChar);
}

Демо пример.

Как узнать зажат(ы) ли Shift, Alt, Ctrl

Для этого используются методы shiftKey, altKey, ctrlKey. Они возвращают true, если соответствующая клавиша зажата или false, если не зажата. Чтобы кроссбраузерно определить состояние клавиш следует анализировать события onKeyUp или onKeyDown (событие для себя выбираем в зависимости от задачи):

document.onkeyup = function checkKeycode(event)
{
	var keycode, keyChar, keyShift, keyAlt, keyCtrl, message="";
	if(!event) var event = window.event;
	if (event.keyCode) keycode = event.keyCode;
	else if(event.which) keycode = event.which;
	keyShift = event.shiftKey;
	if(keyShift) message+=" и зажат shift";
	keyAlt = event.altKey;
	if(keyAlt) message+=" и зажат alt";
	keyCtrl = event.ctrlKey;
	if(keyCtrl) message+=" и зажат ctrl";
	alert("Нажата клавиша: "+keycode+message);
}

Демо пример.

update by myivanko — alert не сработает для некоторых зарезервированных системных комбинаций браузера. особенно таких много в Opera.

Мета-клавиши

Meta — условное обозначение для набора мета-клавиш. На современном PC это обычно Alt и клавиша Windows. На некоторых устройствах/ОС под мета клавиши попадает и Esc. Для чтения состояния служит метод event.metaKey, возвращает true, если зажата хотя бы одна из мета-клавиш, и false, если не зажата.

Материалы

• Detecting keystrokes
• Event properties
• MSDN :: keyCode Property
• Скажи Javascript, нажат ли Caps Lock?