Проверка клавиатуры на нажатие клавиши

При разработке веб-приложений часто возникает необходимость обрабатывать события, связанные с нажатием клавиш клавиатуры. Например, это может быть нужно для отслеживания нажатия клавиши Enter в поле ввода или для реализации горячих клавиш.

Для обработки нажатия клавиш в JavaScript можно использовать несколько методов. Один из них — это метод addEventListener, который позволяет назначить обработчик события на определенный элемент. Второй метод — это использование встроенного объекта window и его свойства onkeypress. Оба метода позволяют проверить, какая клавиша была нажата пользователем.

Пример кода для обработки нажатия клавиш при помощи метода addEventListener:

const input = document.querySelector('#myInput');
input.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
console.log('Нажата клавиша Enter');
 
}
});

В данном примере мы назначаем обработчик события keypress на элемент с id «myInput», который является полем ввода. Внутри обработчика мы проверяем, была ли нажата клавиша Enter, и если да, выводим сообщение в консоль.

Примеры кода для проверки клавиатуры на нажатие клавиш

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

• Пример 1:

Этот пример кода отслеживает нажатие клавиш «Enter» и «Escape» на клавиатуре.

document.addEventListener('keydown', function(event) {
if(event.key === 'Enter') {
console.log('Клавиша "Enter" нажата!');
} else if(event.key === 'Escape') {
console.log('Клавиша "Escape" нажата!');
}
});

• Пример 2:

В этом примере кода отслеживается нажатие клавиш со стрелками вверх, вниз, влево и вправо на клавиатуре.

document.addEventListener('keydown', function(event) {
if(event.key === 'ArrowUp') {
console.log('Клавиша со стрелкой вверх нажата!');
} else if(event.key === 'ArrowDown') {
console.log('Клавиша со стрелкой вниз нажата!');
} else if(event.key === 'ArrowLeft') {
console.log('Клавиша со стрелкой влево нажата!');
} else if(event.key === 'ArrowRight') {
console.log('Клавиша со стрелкой вправо нажата!');
}
});

• Пример 3:

В этом примере кода отслеживается нажатие клавиши «A» и «S» на клавиатуре.

 
 document.addEventListener('keydown', function(event) {
 if(event.key === 'a'