Назад Вперед Зміст

Події клавіатури

Іншим поширеним типом подій є події клавіатури.

• 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 під час генерації події

Натисніть клавіші

Давайте тепер отримуватимемо натиснені клавіші. Це актуально для тих подій, у яких відбувається робота з клавіатурою, наприклад, в keypress, onkeydown, onkeyup.

Для отримання натиснутих кнопок слід використовувати властивість event.keyCode. Воно проте повертає не саму клавішу, а її код. Цей код можна перетворити на символ за допомогою методу String.fromCharCode.

Розглянемо приклад: вводьте текст в інпут і у міру введення ви будете бачити код натиснутої клавіші та саму клавішу:

<input id="input">
<div id="result"></div>

var input = document.getElementById('input');
var result = document.getElementById('result');

input.onkeypress = func;

function func(event) {
	var code = event.keyCode;
	var key = String.fromCharCode(event.keyCode);
	result.innerHTML = 'Код: ' + code + ', клавиша' + key;
}

Введіть текст в інпут:

Ctrl, Alt, Shift

Можна дізнатися, чи натиснуто в момент події клавіші Ctrl, Alt і Shift. Це робиться за допомогою властивостей event.ctrlKey, event.altKey та event.shiftKey - вони мають значення true або false залежно від того, чи була натиснута ця клавіша в момент події чи ні.

У наступному прикладі при натисканні на кнопку будемо виводити повідомлення про те, чи була натиснута одна із клавіш Ctrl, Alt або Shift:

<input type="button" id="button" value="Натисніть на кнопку">

var button = document.getElementById('button');

button.addEventListener('click', func);
function func(event) {
	if (event.ctrlKey) {
		alert('нажат Ctrl');
	}
	if (event.altKey) {
		alert('нажат Alt');
	}
	if (event.shiftKey) {
		alert('нажат Shift');
	}
}

Натисніть кнопку, затиснувши при цьому Ctrl, Alt або Shift:

Приклад 1

Наприклад, ми можемо за допомогою клавіш клавіатури переміщати елемент на веб-сторінці:

У цьому випадку обробляється подія keydown. В обробнику moveRect за допомогою методу window.getComputedStyle() отримуємо стиль елемента bug. А потім із цього стилю вибираємо значення властивостей 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 (висота кореневого елемента).

Наприклад, ми можемо за допомогою клавіш клавіатури переміщувати символ "Х" за таблицею:

Натисни -> Демонстрація.

Назад Вперед Зміст