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 можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:
Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.
Информация о нажатой кнопке мыши 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.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.