JavaScript: Информация О Нажатой Клавише 👇🏽

В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши).

Чтобы получить информацию, о том какая кнопка клавиатуры нажимается в данный момент, воспользуемся следующим кодом:

function keyPress(e) {
    let keyNum;
    if (window.event) {
        keyNum = window.event.keyCode;
    }
    else if (e) {
        keyNum = e.which;
    }
    console.log(keyNum);
}
document.onkeydown = keyPress;

Номер кнопки находится в переменной keyNum

Узнать keyCode кнопки можете здесь:

Выполнение кода в зависимости от нажатой клавиши

Давайте теперь будем выполнять необходимые действия в зависимости от нажатой клавиши

Для этой задачи воспользуемся оператором switch.

В конструкции case укажите номер кнопки, для которой будет выполнен необходимый код.

document.onkeydown = function (e) {
    switch (e.keyCode) {
        case 49:
            console.log("Нажата единица");
            break;
        case 50:
            console.log("Нажата двойка");
            break;
        case 32:
            console.log("Нажат пробел");
            break;
        case 9:
            console.log("Нажат tab");
            break;
        case 16:
            console.log("Нажат shift");
            break;
        default:
            console.log(e.keyCode);
    }
};

Вместо console.log выполняйте необходимые действия.

Если была нажата клавиша, которой нет в списке, то для неё можете выполнить другой код. Писать в default.

Как отследить комбинации нажатых клавиш

Отследить нажатие CTRL, SHIFT и ALT можно также другими способами (данный способ необходим чтобы отследить комбинации).

• ctrlKey - CTRL
• altKey - ALT
• shiftKey - SHIFT

Например, отследить нажатие CTRL можно следующим образом:

document.addEventListener("keydown", function (e) {
    if (e.ctrlKey) {
        console.log("Был нажат CTRL");
        document.getElementById("btnClick").textContent = "CTRL";
    }
});

Используя всю ранее полученную информацию, определим нажатую комбинацию клавиш, например, CTRL + F5:

document.addEventListener("keydown", function (e) {
    e.preventDefault();

    if (e.ctrlKey && event.key == "F5") {
        console.log("Была нажата комбинация клавиш CTRL + F5");
    }
});

Как вы могли заметить, обращаться к клавишам в JavaScript можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:

event.key == "F5" 
   аналогично 
e.keyCode == 116 

Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.

Информация о нажатой кнопке мыши JavaScript

Рассмотрим, как определить какая кнопка мыши нажимается над объектом: левая кнопка, правая или дабл клик.

Выполнение кода при клике левой кнопкой мыши:

document.querySelector(selector).onclick = function (e) {
    if (e.which == 1) {
        console.log("Нажата левая кнопка мыши");
    }
}

Выполнение кода при клике правой кнопкой мыши:

document.querySelector(selector).oncontextmenu = function (e) {
    e.preventDefault();
    console.log("Нажата правая кнопка мыши");
}

Выполнение кода при двойном клике по кнопке:

document.querySelector(selector).ondblclick = function () {
    console.log("Двойное нажатие левой кнопки мыши");
}