Событие onkeydown относится к событиям клавиатуры (Keyboard Events), к которым еще относятся onkeypress и onkeyup. Напомню, что название самого события - это keydown, keypress или keyup, а приставка on говорит о том, что мы должны записать функцию-обработчик события любым доступным для нас способом.
Событие onkeydown происходит, когда пользователь нажимает клавишу на клавиатуре. Как правило, нам нужен либо символ на этой клавише, либо ее код, чтобы привязать обработчик события в JavaScript.
Рассмотрим обработку события onkeydown на примере клика по цифровым кнопкам от 1 до 6. Мы будем менять цвет фона для body, внутри которого на нашей странице будет расположена картинка и несколько цветовых квадратов. Именно цвет этих квадратов и будет определяющим для нас в плане задания фонового цвета всего документа.
Разметка страницы
Разметка страницы такова:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="wrap"> <h1>Измененяем цвета фона по событию onclick и onkeydown</h1> <p><img src="img/pic.jpg"></p> <ul id="colors"> <li class="btn" style="background:#fff" title="Любая клавиша"> </li> <li class="btn" style="background:#ccc" title="Клавиша 1"> </li> <li class="btn" style="background:#999" title="Клавиша 2"> </li> <li class="btn" style="background:#666" title="Клавиша 3"> </li> <li class="btn" style="background:#333" title="Клавиша 4"> </li> <li class="btn" style="background:#000" title="Клавиша 5"> </li> <li class="btn" style="background:#f00" title="Клавиша 6"> </li> </ul> </div> |
В каждом из элементов <li> у нас есть атрибут title="Клавиша n" со вплывающей подсказкой по поводу того, какую клавишу нам нужно нажать.
CSS-свойства элементов
JavaScript-код мы будем записывать, определяя обработчик события для всего документа, т.к. для элемента <ul> не характерно прослушивание событий клавиатуры, т.к. обычно мы внутрь списка не вводим никакой информации, мы ее получаем и читаем или просматриваем, как в нашем случае, т.к. css-свойства для наших элементов страницы будут такими:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #wrap { width: 90%; max-width: 720px; margin: auto; } img { border: 2px solid white; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); } p { text-align: center; } ul { list-style-type: none; text-align: right; margin-top: 20px; } li.btn { display: inline-block; margin-right: 10px; width: 30px; height: 30px; border: 1px solid #000000; cursor: pointer; } |
Обрабатываем событие onkeydown в коде JavaScript
Код на JS содержит вызов функции, которая принимает единственный параметр event, связанный с объектом события, которое генерирует любой браузер. Но в большинстве браузеров это именно параметр, передаваемый в функцию-обработчик события в качестве аргумента, а в Internet Explorer - объект-свойство глобального объекта window. Поэтому в первой строке в функции мы выполняем проверку на существование аргумента event для разных браузеров.
Кроме того, нам необходимо узнать, а какую, собственно, клавишу нажал пользователь. Для этого в объекте event существует свойство event.keyCode, возвращающее виртуальный код нажатой клавиши. Для каждой клавиши он будет уникальным и цифровым. Поэтому мы можем легко отследить, какие коды возвращают клавиши от 1 до 6 и привязать к ним код в виде условной конструкции switch ... case, которая позволит нам отследить номер нажатой клавиши и изменить цвет фона для document.body. Если пользователь нажмет любую другую клавишу, кроме 1...6, то цвет фона вернется к белому - это значение задано в строчке default.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | document.onkeydown=changeBG; function changeBG(event){ if (!event) event = window.event; console.log(event, event.keyCode) switch(event.keyCode){ case 49: document.body.style.background = "#ccc"; break; case 50: document.body.style.background = "#999999"; break; case 51: document.body.style.background = "#666"; break; case 52: document.body.style.background = "#333"; break; case 53: document.body.style.background = "#000000"; break; case 54: document.body.style.background = "#ff0000"; break; default: document.body.style.background = "#ffffff"; } } |
Смотрим на пример вживую. Учтите, что вам придется сначала кликнуть по примеру, чтобы его активировать, а уже потом нажимать клавиши. Можно также открыть пример в новой вкладке, тогда кликать внутри не придется.
Если вы откроете консоль браузера (клавиша F12), то при нажатии любой клавиши увидите информацию о событии и его свойстве keyCode (строка console.log(event, event.keyCode)):
Добавляем обработку события onclick
Поскольку не всякий пользователь догадается подвести курсор к цветным квадратам, чтобы узнать, какую клавишему стоит нажать, а на мобильных девайсах это вообще не получится, то стоит добавить обработку клика по цветным квадратам. Для этого используем обработчик onclick для <ul> с делегированием клика его вложенным элементам <li>.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let ul = document.getElementById("colors"); let li = ul.getElementsByTagName("li"); //2 строки можно заменить на //let li = document.querySelectorAll('#colors li'); for(let i=0, len=li.length; i<len; i++){ li[i].onclick=changeColor; } function changeColor(event){ event = event || window.event; console.log(event, event.target); let target= event.srcElement || event.target; document.body.style.background = target.style.background; } |
Теперь при клике на любом из квадратов в консоли вы увидите примерно такое сообщение (браузер Mozilla Firefox):
Свойством event.target, т.е. целевым объектом клика, будет каждый элемент списка<li>, по которому вы кликнули.
Коды клавиш
Если вы заинтересовались обработкой событий onkeydown, onkeypress или onkeyup, вам пригодятся значения кодов клавиш. Их можно найти на сайте Javascript Key Codes или посмотреть на скриншоте ниже.
Для наглядности попробуйте сами понажимать клавиши и узнать их код в примере ниже.
Код примера:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div id="insert" class="test"> <div class="key"> Нажмите любую клавишу, чтобы увидеть коды нажатой клавиши </div> </div> <script> const insert = document.getElementById('insert') window.addEventListener('keydown', (event) => { insert.innerHTML = `<div class="key"> ${event.key === ' ' ? 'Пробел' : event.key} <small>event.key</small> </div> <div class="key"> ${event.keyCode} <small>event.keyCode</small> </div> <div class="key"> ${event.code} <small>event.code</small> </div>`; }) </script> |
Обратите внимание, что свойства иногда совпадают по значению, а иногда различаются в зависимости от языка клавиатуры, нажатой клавиши Shift или использования цифровых/специальных клавиш.
Для обработки события здесь использована стрелочная функция.
Кстати, выравнивание элементов по центру в этом примере сделано с помощью Flexbox-модели.
Спасибо за пример, благодаря ему, смог разобраться как поставить управление на игру, другие примеры плохо подходили.
Отлично, что у вас все получилось.