JS События

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

Другим распространенным типом событий являются события клавиатуры.

keydown: возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша
keyup: возникает при отпускании клавиши клавиатуры
keypress: возникает при нажатии клавиши клавиатуры, но после события keydown и до события keyup.

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

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

altKey: возвращает true, если была нажата клавиша Alt во время генерации события
charCode: возвращает символ Unicode для нажатой клавиши (используется для события keypress)
keyCode: возвращает числовое представление нажатой клавиши клавиатуры
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.keyCode){
	
	case 37:  // если нажата клавиша влево
	if(left>0)
	blueRect.style.marginLeft = left - 10 + "px";
	break;
	case 38:   // если нажата клавиша вверх
	if(top>0)
	blueRect.style.marginTop = top - 10 + "px";
	break;
	case 39:   // если нажата клавиша вправо
	if(left < document.documentElement.clientWidth - 100)
	blueRect.style.marginLeft = left + 10 + "px";
	break;
	case 40:   // если нажата клавиша вниз
	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.keyCode получаем нажатую клавишу. Список кодов клавиш клавиатуры можно посмотреть на сайте http://www.javascriptkeycode.com/.

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