Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

клавиши js

Всем привет сегодня мы с вами рассмотрим основные события при использовании клавиш в 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. Конечно тема намного обширнее, но для общего понимания и большинства задач этих знаний будет достаточно. Дальше дело за вами.

Желаю всего хорошего и удачи!

Оцените статью

Еще статьи

Ссылки html

canvas html

библиотека tkinter

CSS counter-increment

Fetch HTML

Аргументы функций php

произношение javascript

selection javascript

Типы параметров функций и методов в php7

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке