Всем привет сегодня мы с вами рассмотрим основные события при использовании клавиш в js и как ими пользоваться.
В общем для работы с клавишами выделяются три события onkeydown, onkeyup, onkeypress. Особой разницы между работой этих событий нет. Но все же пояснить следует onkeydown событие срабатывает при нажатии клавиши, onkeyup при отпускании клавиши или отжатии, onkeypress аналогично onkeydown , но ловит только символьные клавиши.
Давайте разберем на примере:
var count = 0;
function keyPressed(e)
{
count++;
console.log('Мы кликнули по клавишам '+count+' раз(а)');
}
document.onkeydown = keyPressed;Как видите при каждом нажатии клавиш у нас вызывается функция keyPressed которая выводит в консоль оповещение сколько раз мы нажали на клавишу, следую обратить внимание , если мы зажмем клавишу при событие onkeydown , то функция keyPressed будет вызываться беспрерывно. Если же мы хотим чтобы функция вызывалась только про нажатии клавиши, то можем воспользоваться событием onkeyup. Теперь давайте воспользуемся событием.
На первый взгляд никакой разницы событием onkeydown мы не видим, а теперь давайте нажмем какую нибудь специальную клавишу допустим ctrl. Событие не сработало в этом то и состоит разница между onkeydown и keyPressed, в keyPressed специальные клавиши не обрабатываются.
Поехали дальше! Конечно нам как правило надо повесить событие на определенные клавиши, как мы это можем реализовать? Да очень просто у каждой клавиши есть свой уникальный так скажем идентификатор ( код). И для того чтобы его определить мы внутри нашей функции написать window.event.keyCode
function keyPressed(e)
{
var keyCode = window.event.keyCode;
console.log(keyCode);
}
document.onkeydown = keyPressed;Как видите нам в консоль при нажатии клавиш начали выводится числовые значения, это и есть уникальные коды клавиш. Мы также можем идентифицировать наши клавиши в символьном представлении, обратившись к так называемому объекту события, в нашем случае это аргумент функции e и вызвать его свойство key
function keyPressed(e)
{
var key = e.key;
console.log(key);
}
document.onkeydown = keyPressed;Какой вариант идентификации клавиши для вас предпочтительнее выбирайте сами!
Поехали далее и давайте применим полученные знания на практике:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Работа с клавишами в js</title>
</head>
<body>
<style>
.circle{
width:20px;
height:20px;
border-radius:50%;
background:green;
position:relative;
}
</style>
<div class="circle"></div>
<script>
function noneNaN(per){
var res = per;
if(per.toString() === 'NaN'){
res = 1;
}
return res;
}
function keyPressed(e)
{
var key = e.key,
x = noneNaN(parseInt(document.querySelector(".circle").style.left)),
y = noneNaN(parseInt(document.querySelector(".circle").style.top));
if(key.toString() === 'ArrowRight'){
document.querySelector(".circle").style.left = x + 3+'px';
}
if(key.toString() === 'ArrowLeft'){
document.querySelector(".circle").style.left = x - 3+'px';
}
if(key.toString() === 'ArrowDown'){
document.querySelector(".circle").style.top = y + 3+'px';
}
if(key.toString() === 'ArrowUp'){
document.querySelector(".circle").style.top = y - 3+'px';
}
}
document.onkeydown = keyPressed;
</script>
</body>
</html>Здесь мы сделали круг который с помощью стрелочек можем перемещать в нашем окне.
У нас также есть возможность сделать горячие клавиши. Рассмотрим на примере комбинаций клавиш ctrl + ] и alt + ]
function keyPressed(e)
{
var key = e.key;
if(key.toString() === ']' && e.ctrlKey) {
console.log('Комбинация клавиш ctrl + '+key);
}
if(key.toString() === ']' && e.altKey) {
console.log('Комбинация клавиш alt + '+key);
}
}
document.onkeydown = keyPressed;Как видите для того чтобы использовать горячие клавиши мы должны расширить наше условие , дописав проверку на наличие использования специальных клавиш(ctrl, alt и т.п.)
Вот в общем то и все что я вам хотел рассказать про использование клавиш в js. Конечно тема намного обширнее, но для общего понимания и большинства задач этих знаний будет достаточно. Дальше дело за вами.
Желаю всего хорошего и удачи!
