RealAdmin

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

События клавиатуры в JavaScript
Комментарии: 0

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

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

В 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».

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

Клавиша Key keyCode
Ввод Enter 13
Стереть Backspace 8
Удалить Delete 46
Пробел (печатный пробел) 32
Табулятор Tab 9
Esc Escape 27
Стрелка влево ArrowLeft 37
Стрелка вверх ArrowTop 38
Стрелка вправо ArrowRight 39
Стрелка вниз ArrowDown 40
Shift Shift 16
Ctrl Control 17
Alt Alt 18

Хорошей практикой в 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');
    }
});

Свойство 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();
    }
  });
});

Коды клавиш

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

key keyCode code charCode
keydown
keypress
keyup
Темы:
Ещё интересное — 6
Комментарии —
    © REALADMIN.RU   2020 г.
    Страница сгенерирована: 0,1595 s | 6 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С