События клавиатуры в JavaScript

При вводе с клавиатуры в javascript возникает сразу несколько событий, которые позволяют отследить коды нажатых клавиш и получить дополнительную полезную информацию для полного контроля над устройством ввода. Перейдём к теоретической и практической части.

• События клавиатуры
• Получение свойств событий
  • key и keyCode
  • code и charCode
  • altKey, ctrlKey, shiftKey
  • Command на Mac
  • type
  • repeat
• Пример проверки ввода в Input
• Коды клавиш

События клавиатуры

В JS для клавиатуры используется 3 основных события:

1. onkeydown — срабатывает при нажатии на клавишу и повторяется пока её не отжали.
2. onkeypress — идентично предыдущему, но с 2 особенностями:
   • срабатывает после «onkeydown» и только для клавиш с символами;
   • функциональные клавиши, типа Alt и Ctrl, его не задействуют.
3. onkeyup — срабатывает один раз после отжатия.

Пример:

document.addEventListener('keydown', function(){
    console.log('Success onkeydown');
});

document.addEventListener('keypress', function(){
    console.log('Success onkeypress');
});

document.addEventListener('keyup', function(){
    console.log('Success onkeyup');
});

Длительное нажатие

Обычное

Для избежания повторных вызовов «keydown» и «keypress» используйте свойство «repeat». Подробнее рассмотрим его позже.

В примерах использовался метод «addEventListener», но можно встретить и другие варианты:

// устаревший способ
document.onkeydown = function(){
    console.log('Success onkeydown');
});

// на jQuery
$(document).on('keydown', function(){
    console.log('Success onkeydown');
});

// встроенный в HTML
<input type="text" onkeydown="console.log('Success onkeydown');" />

Получение свойств событий

Для получения информации о клавише обратитесь к свойствам объекта «event».

Пример:

document.addEventListener('keyup', function(event){
    console.log('Key: ', event.key);
    console.log('keyCode: ', event.keyCode);
});

Свойства key и keyCode

key — возвращает значение нажатой клавиши в виде строки. Например, "F", "5" или "Enter".

keyCode — возвращает числовой код. Для события «keypress» вернёт ASCII-код нажатого символа.

Примечание. Цифры на верхнем и боковом блоке клавиатуры имеют разные «keyCode».

Коды основных функциональных клавиш:

Хорошей практикой в JavaScript считается использование «key», а не «keyCode». Это повышает читаемость кода и избавляет от необходимости запоминать соответствие кодов их значениям.

Свойства code и charCode

Актуальны только для события «keypress».

• code — возвращает строковое наименование символа. Для букв имеет вид "keyD", "keyF". Такие значения будут возвращены независимо от установленного языка и регистра букв. Для цифр верхнего блока клавиатуры возвращает значение вида "Digit5", для бокового — "Numpad5".
• charCode — возвращает код символа из таблицы ASCII. Код букв на разных языковых раскладках клавиатуры отличается. Регистр также имеет значение. Например, "f" имеет код 102, а "F" — 70.

document.addEventListener('keypress', function(event){
    console.log('Строковый код: ', event.code);
    console.log('ASCII код: ', event.charCode);
});

Не поддерживаются IE и старыми версиями других браузеров.

Свойства altKey, ctrlKey, shiftKey

Позволяют отследить, зажат ли в момент события Alt, Ctrl или Shift. Удобно использовать для создания горячих клавиш.

document.addEventListener('keydown', function(event){
    if (event.shiftKey && ['F','f'].includes(event.key) ) {
        console.log('Нажаты Shift + F или Shift + f');
    }
});

Проверка зажатой клавиши Command на Mac

На устройствах компании Apple в горячих клавишах вместо Ctrl часто используют Cmd. Чтобы разграничить их действие для Mac и остальных устройств применяйте конструкцию с проверкой свойства «metaKey».

document.addEventListener('keydown', function(event){
    const isCtrlCmd = window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey;
    
    if (isCtrlCmd && event.key == '+') console.log('Ctrl/Cmd +');
    if (isCtrlCmd && event.key == '-') console.log('Ctrl/Cmd -');
});

Свойство type

Возвращает тип события в виде строки. Может использоваться, когда один обработчик применяется сразу для нескольких событий.

['keydown', 'keyup'].forEach(function(event) {
  window.addEventListener(event, function(event){
      if (event.type == 'keydown') {
        console.log('Зажали...');
      }
      else if (event.type == 'keyup') {
        console.log('Отжали');
      }
  });
});

Свойство repeat

Возвращает логическое «true», если событие уже один раз отработало и автоматически вызывается снова. Подобная ситуация возникает при зажатии клавиши на длительное время — «keydown» и «keypress» начинают срабатывать повторно.

document.addEventListener('keydown', function(event){
    if (event.repeat == false) {
        console.log('первичное срабатывание');      
    } else {
        console.log('повторное срабатывание');
    }
});

Пример проверки ввода в Input

Рассмотрим небольшой пример, в котором разрешим ввод в текстовое поле только нуля и единицы. Учитываем возможность стирания, удаления и табуляции.

// HTML
<input id="binaryInput" type="text">

// SCRIPT
document.getElementById('binaryInput').addEventListener('keydown', function(event){
    if (!['0','1','Backspace','Delete','Tab'].includes(event.key)) {
        event.preventDefault();
    }      
});

Результат:

Метод «preventDefault()» запрещает действие по умолчанию.

Применение предыдущего обработчика ко всем текстовыми полями на странице:

document.querySelectorAll('input[type="text"]').forEach(function(element){
  element.addEventListener('keydown', function(event){
  	if (!['0','1','Backspace','Delete','Tab'].includes(event.key)) {
        event.preventDefault();
    }
  });
});

Коды клавиш

Поставьте курсор в поле ввода и нажмите любую клавишу: