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("Двойное нажатие левой кнопки мыши");
}
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: