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

Последнее обновление: 20.01.2021

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

  • 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 получаем нажатую клавишу. Список кодов клавиш клавиатуры можно посмотреть на странице https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values.

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

Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850