Как работают события клавиатуры в JavaScript


Введение

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

Что такое событие клавиатуры?

Когда пользователь нажимает клавишу на клавиатуре, под капотом происходят различные события. Они происходят при получении ввода с клавиатуры. Эти события описывают взаимодействие клавиатуры с пользователями. Другими словами, событие клавиатуры просто указывает на взаимодействие пользователя с клавишей на клавиатуре на низком уровне, не предоставляя никакого контекста для этого взаимодействия. Например, при работе с вводом текста используйте событие ввода. Если пользователь использует альтернативный метод ввода текста, например, систему рукописного ввода на планшете или графическом планшете, события клавиатуры могут не запускаться. Эти события, возникающие, когда пользователь нажимает клавишу на клавиатуре, известны как объект события клавиатуры.

Работа с событиями клавиатуры в JavaScript.

Клавиатурные события в JavaScript, как мы знаем, используются для обнаружения нажатой клавиши. Существуют различные типы клавиатурных событий, а именно: keydown, keypress и keyup.

Keydown:

Это события, возникающие при нажатии кнопки на клавиатуре.

Нажатие клавиши:

Эти события возникают при нажатии клавиши, которая представляет символ, например, букву, цифру или знак препинания. Это также сообщает программе, какой символ представляет клавиша.

Нажатие клавиши:

Эти события возникают при отпускании кнопки, которая была нажата на клавиатуре.

Keydown и keyup:

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

Код клавиши — это просто число, которое представляет клавишу на клавиатуре. Код клавиши возвращается к кнопке, когда цифра была нажата или отпущена.

Код клавиши ASCII возвращает коды ASCII и работает только с событиями нажатия клавиш.

ASCII.

расшифровывается как Американский стандартный код для обмена информацией. Это 7-битный символьный код, где каждый отдельный бит представляет уникальный символ.

Если вы используете keydown или keyup, вы используете коды клавиш.

Если вы используете нажатие клавиши, вы используете ASCII-код клавиши.

Рассмотрим пример;

Эта программа проверяет, была ли нажата буква ‘a на клавиатуре. Если да, то она выведет на экран простой массаж. Буква ‘a’ обозначает 65 в таблице ASCII, о чем можно узнать, поискав в google коды клавиш. Буквы и цифры имеют номера ключевых кодов.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>keyboard Events</title>
</head>
<body>
<script>
 window.addEventListener("keydown", checkkeyPress, false);
 function checkkeyPress(key){
    if(key.keyCode=="65"){
      alert("the 'a' letter has been pressed!")
    }       
 }
</script>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Я добавил слушатель событий под названием checkkeypress(), который запускает оповещение каждый раз, когда на клавиатуре нажимается символ ‘a’. Опять же, стоит отметить, что символ ‘a’ обозначает ’65’ в таблице ASCII. Это связано с тем, что компьютеры не понимают алфавитные символы.

Просмотрите код в браузере, попробуйте нажать на буквы b, c, f, g, h и т.д. ничего не произойдет. Но когда вы нажмете букву ‘a’, появится сообщение о том, что была нажата клавиша ‘a’.

Приведенный выше пример можно также реализовать для событий keydown и keyup.

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

Заключение

Наконец, мы подошли к завершению этого руководства и надеемся, что вы получили от него пользу.

Спасибо за прочтение, пожалуйста, нажмите кнопку like, clap или heart, чтобы выразить свою любовь, и увидимся в следующем уроке…

Мы узнали, что такое события клавиатуры и как они работают. Мы также рассмотрели различные клавиатурные события JavaScript, такие как keydown, keypress и keyup.

Если у вас есть вопросы, пожалуйста, задавайте их в комментариях. Ставьте лайк и делитесь, и до следующего раза, всего наилучшего!

Об авторе

Я Дженнифер Эзе, энтузиаст-разработчик, увлекающийся JavaScript, PHP, HTML & CSS.

Я работаю фрилансером, создаю сайты для клиентов и люблю писать технические руководства, чтобы научить других тому, что я делаю. Я с нетерпением жду ваших предложений. Свяжитесь со мной на LinkedIn, Github или на моем сайте.

Оцените статью
Procodings.ru
Добавить комментарий