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

Распространенным типом событий являются события клавиатуры:

keydown() возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша
keyup() возникает при отпускании клавиши клавиатуры
keypress() возникает при нажатии клавиши клавиатуры, но после события keydown и до события keyup. Надо учитывать, данное событие генерируется только для тех клавиш, которые формируют вывод в виде символов, например при печати символов. Нажатия на остальные клавиши, например Alt, не учитываются

Для работы с событиями клавиатуры определен объект KeyboardEvent, который добавляет к свойствам объекта Event ряд специфичных для клавиатуры свойств:

altKey возвращает true, если была нажата клавиша Alt во время генерации события
key возвращает символ нажатой клавиши, например, при нажатии на клавишу T это свойство будет содержать T. А если нажата клавиша Я, то это свойство будет содержать Я
code возвращает строковое представление нажатой клавиши физической клавиатуры QWERTY, например, при нажатии на клавишу T это свойство будет содержать KeyT, а при нажатии на клавишу ;, свойство возвратит Semicolon". При использовании этого свойства следует учитывать ряд момент, прежде всего используется клавиатура QWERTY. То есть мы переключим раскладку, к примеру, на русскоязычную и нажмем на клавишу Я, значением будет KeyZ - на клавиатуре QWERTY клавиша Z представляет ту же клавишу, что и на русскоязычной раскладке Я. Другой момент - учитывается именно физическая клавитура. Если нажата клавиша на виртуальной клавиатуре, то возвращаемое значение будет устанавливаться браузером исходя из того, какой клавише на физической клавиатуре соответствовало нажатие
ctrlKey возвращает true, если была нажата клавиша Ctrl во время генерации события
metaKey возвращает true, если была нажата во время генерации события метаклавиша клавиатуры
shiftKey возвращает true, если была нажата клавиша Shift во время генерации события

Например, мы можем с помощью клавиш клавиатуры перемещать элемент на веб-странице:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function moveRect(e){
var blueRect = document.getElementById("blueRect");
// получаем стиль для blueRect
var cs = window.getComputedStyle(blueRect);
var left = parseInt(cs.marginLeft);
var top = parseInt(cs.marginTop);
switch(e.key){
case "ArrowLeft":  // если нажата клавиша влево
if(left>0)
blueRect.style.marginLeft = left - 10 + "px";
break;
case "ArrowTop":   // если нажата клавиша вверх
if(top>0)
blueRect.style.marginTop = top - 10 + "px";
break;
case "ArrowRight":   // если нажата клавиша вправо
if(left < document.documentElement.clientWidth - 100)
blueRect.style.marginLeft = left + 10 + "px";
break;
case "ArrowDown":   // если нажата клавиша вниз
if(top < document.documentElement.clientHeight - 100)
blueRect.style.marginTop = top + 10 + "px";
break;
}
}
addEventListener("keydown", moveRect);
</script>
</body>
</html>

В данном случае обрабатывается событие keydown. В обработчике moveRect с помощью метода window.getComputedStyle() получаем стиль элемента blueRect. А затем из этого стиля выбираем значения свойств marginLeft и marginTop.

С помощью свойства e.key получаем нажатую клавишу. Список кодов клавиш клавиатуры можно посмотреть на странице.

Здесь нам интересуют четыре клавиши: вверх, вниз, влево, вправо. Им будут соотвтствовать названия ArrowTop, ArrowDown, ArrowLeft и ArrowRight. Если одна из них нажата, производим действия: увеличение или уменьшение отступа элемента от верхней или левой границы. Ну и чтобы элемент не выходил за границы окна, проверяем предельные значения с помощью document.documentElement.clientWidth (ширина корневого элемента) и document.documentElement.clientHeight (высота корневого элемента).