Работа с клавиатурой в JavaScript | События клавиатуры

При интерактивном взаимодействии пользователя с Web-страницей с использованием клавиатуры возникают следующие события:

keyDown - при нажатии клавиши;
keyPress - при нажатии клавиши;
keyUp - при отпускании клавиши.

События keyDown и keyPress различаются значениями свойств объекта event.

В лабораторной работе №13 (3 JS) "Определение и изменение свойств объектов Web-страницы" были рассмотрены свойства объкта event, связанные с работой с мышкой. При возникновении событий, связанных с работой пользователя с клавиатурой, объект event формирует и передает следующие свойства:

keyCode - возвращает значение Unicode клавиши (для цифр и латинских букв совпадает с ASCII-кодом клавиши), которое имеет особенности, зависящие от типа события:
- для событий keyDown и keyUp - возвращает Unicode всех клавиш, включая управляющие, для букв не зависит от состояния регистра клавиатуры и установленного языка - всегда Unicode заглавных латинских букв;
- для события keyPress - не реагирует на нажатие управляющих клавиш, возвращает Unicode букв с учетом регистра клавиатуры (заглавные, строчные) и установленного языка (латинский, русский и украинский).
altKey - возвращает true, если была нажата клавиша "Alt", и false в противном случае (только для события keyDown);
altLeft - возвращает true, если была нажата левая клавиша "Alt", и false в противном случае (только для события keyDown);
ctrlKey - возвращает true, если была нажата клавиша "Ctrl", и false в противном случае (только для события keyDown);
ctrlLeft - возвращает true, если была нажата левая клавиша "Ctrl", и false в противном случае (только для события keyDown);
shiftKey - возвращает true, если была нажата клавиша "Shift", и false в противном случае (только для события keyDown);
shifLeft - возвращает true, если была нажата левая клавиша "Shift", и false в противном случае (только для события keyDown);
repeat - возвращает true, если событие keyDown наступило повторно вследствие того, что пользователь удержал клавишу нажатой, и false в противном случае.

Хотя при нажатии правых управляющих клавиш ("Alt", "Ctrl" и "Shift") объект event не формирует свойств, аналогичных тем, которые создаются для левых управляющиз клавиш, определить, была ли нажата правая управляющая клавиша, можно следующим образом: если выражение event.altKey&&!event.altLeft возвращает значение true, значит была нажата именно правая клавиша "Alt".

Особенности работы с клавиатурой показаны в примере № 3, где путем обработки событий, связанных с нажатием определенных клавиш, выполняются загрузка рисунков на Web-страницу, их перемещение по экрану и изменение размера.

Пример 3

<HTML>
<HEAD>
<TITLE>Работа с клавиатурой/TITLE>
<SCRIPT>
function keyEvent()
{
status='Unicode= '+event.keyCode+ ' Символ='+String.fromCharCode(event.keyCode);
if((event.keyCode>=49)&&(event.keyCode<=51))
{
imgs.width=150;
imgs.style.position="absolute";
imgs.style.left=0;
imgs.style.top=0;
}
switch (event.keyCode) //Анализ Unicode клавиш
{
case 37: {imgs.style.pixelLeft-=10; break} // "Стрелка влево"
case 38: {imgs.style.pixelTop-=10; break} // "Стрелка вниз"
case 39: {imgs.style.pixelLeft+=10; break} // "Стрелка вправо"
case 40: {imgs.style.pixelTop+=10; break} // "Стрелка вверх"
case 49: {imgs.src="flower.jpg"; break} // "1"
case 50: {imgs.src="everest.jpg"; break} // "2"
case 51: {imgs.src="fish.gif"; break} // "3"
case 188:{imgs.width--; break;} // "<"
case 190:{imgs.width++; break;} // ">"
}
}
function help()
{
alert("Выбор рисунка: клавиши '1','2' и '3'\n" +
"Перемещение рисунка: клавиши 'Стрелка влево','Стрелка вправо',"+
" 'Стрелка вниз' и 'Стрелка вверх'\n"+
"Изменение размера рисунка: клавиши '<' и '>'");
event.returnValue=false;
}
</SCRIPT>
</HEAD>
<BODY onHelp="help()" onKeyDown="keyEvent()">
<IMG NAME=imgs WIDTH=0>
</BODY>
</HTML>

После загрузки Web-страницы появляется пустое окно браузера. При нажатии любой клавиши клавиатуры по событию keyDown вызывается функция keyEvent(), которая анализирует Unicode клавиш и выполняет следующие действия:

выводит в поле статуса окна браузера значение Unicode клавиши и ее символ, полученный методом fromCharCode() объекта String;
по нажатию клавиш "1", "2" и "3" - выводит в окно браузера изображение соответственно цветка, горы Эверест и рыбок;
при нажатии клавиш "Стрелка влево", "Стрелка вправо", "Стрелка вниз" и "Стрелка вверх" - перемещает полученное изображение по окну браузера;
- при нажатии клавиш ">" и "<" - увеличивает или уменьшает размер изображения .

При нажатии клавиши "F1" по событию Help вызывается функция Help(), которая выводит на экран подсказку о назначении клавиш, используемых в примере. Поскольку это событие обрабатывается также браузером, можно запретить вывод сообщений браузера, указав в функции значение свойства returnValue объекта event, равным false. Это также можно сделать несколько по другому:

<BODY onHelp="help(); retorn false"