Библиотека примеров приложений Java
4.1. Просмотр кодов клавиш в приложении JDK 1.1
На примере автономного приложения Java мы покажем вам способ обработки событий от клавиатуры. В своем окне наше приложение показывает код и название каждой нажатой или отжатой клавиши. При этом мы используем механизм обработки событий, принятый в JDK версии 1.1 и более старших версий.
Немного теории
Реализовав интерфейс KeyListener и зарегистрировав приемник событий при помощи метода addKeyListener, приложение Java сможет работать с клавиатурой.
В рамках интерфейса KeyListener ваше приложение должно определить три метода с именами keyPressed, keyReleased и keyTyped. Первые два из них будут получать управление, соответственно, при нажатии и отпускании клавиш. Метод keyTyped вызывается в том случае, если пользователь нажал и отпустил клавишу или комбинацию клавиш (такую, например, как ).
Всем перечисленным выше методам передается ссылка на объект класса KeyEvent, например:
Воспользовавшись этой ссылкой, вы сможете получить нужную информацию о клавише, вызвавшей возникновение события.
Внутри обработчиков keyPressed и keyReleased нетрудно определить код нажатой или отпущенной клавиши, воспользовавшись методом getKeyCode. Если методу getKeyText передать значение, полученное от этого метода, то можно получить текстовое описание клавиши, вызвавшей событие.
Метод getKeyChar применяется внутри метода keyTyped. Заметим, что если вы попытаетесь вызвать метод getKeyCode из метода keyTyped, то в качестве результата получите код неопределенной виртуальной клавиши со значением KeyEvent.VK_UNDEFINED.
В том случае когда код клавиши нельзя отобразить ни на один символ Unicode, метод getKeyChar возвращает значение KeyEvent.CHAR_UNDEFINED.
В классе KeyEvent имеются определения констант для кодов всех основных клавиш. Мы приведем только самые необходимые (полный список есть в документации JDK):
Анализируя код нажатой или отжатой клавиши в методах keyPressed и keyReleased, ваше приложение может предпринимать те или иные действия в соответствии с логикой работы программы. Если же для вас важен код символа, соответствующий нажатой клавише или комбинации клавиш, воспользуйтесь методами keyTyped и getKeyChar.
Описание примера
Пример KeyInfo представляет собой автономное приложение Java с окном класса Frame. Внутри этого окна отображаются коды, а также названия нажимаемых и отжимаемых клавиш (рис. 1).
Рис. 1. Окно приложения KeyInfo.
Рассмотрим исходный текст приложения.
Класс KeyInfo
В классе KeyInfo мы определили статический метод main, в задачу которого входит создание объекта на базе класса FrameWindow, определенного в нашем приложении:
После создания объекта мы инициализируем его методом init и отображаем методом show.
Класс FrameWindow
Этот класс создан нами на базе класса Frame. Для обработки событий от клавиатуры он реализует интерфейс KeyListener. Дополнительно этот класс также реализует интерфейс WindowListener, что необходимо для правильного завершения работы приложения при удалении его окна:
Поля класса FrameWindow
В классе FrameWindow мы определили всего два поля:
Конструктор класса FrameWindow
Этот конструктор достаточно прост:
Он вызывает конструктор базового класса Frame, устанавливает методом setSize размеры окна приложения, а также цвет фона и текста.
Метод init класса FrameWindow
В задачу метода init класса FrameWindow входит регистрация обработчиков событий от клавиатуры и от главного окна приложения:
Регистрация выполняется, соответственно, методами addKeyListener и addWindowListener.
Метод keyPressed класса FrameWindow
Когда пользователь нажимает клавишу, управление передается методу keyPressed, реализованному как часть интерфейса KeyListener:
При помощи метода getKeyCode мы проверяем виртуальный код нажатой клавиши. Если он равен KeyEvent.VK_F3 (то есть соответствует функциональной клавише ), приложение завершает свою работу.
Далее метод lineFeed, также определенный в нашем приложении, выполняет свертку содержимого окна, сдвигая старые сообщения на одну строку вниз.
Метод keyReleased класса FrameWindow
Исходный текст этого метода представлен ниже:
Метод keyTyped класса FrameWindow
Этот метод наше приложение не использует. Тем не менее, мы должны его определить как составную часть интерфейса KeyListener:
Метод showKeyboardInfo класса FrameWindow
Прежде всего метод showKeyboardInfo получает ссылку на контекст отображения окна приложения:
Далее в этом контексте устанавливается шрифт с фиксированной шириной символов Courier:
Вслед за этим метод формирует текстовую строку s, записывая в нее виртуальный код клавиши и текстовое описание кода клавиши:
Метод lineFeed класса FrameWindow
В задачу метода lineFeed входит свертка нижней части окна приложения после отображения очередной строки сообщения.
Прежде всего метод lineFeed получает ссылку на контекст отображения и выбирает в этот контекст тот самый шрифт, который используется для рисования сообщений:
Далее метод получает метрики этого шрифта и определяет высоту символов, сохраняя ее в поле yHeight:
В поле wndDimension записываются размеры окна приложения:
Свертка выполняется методом copyArea:
Здесь мы сдвигаем верхнюю часть окна приложения вниз на размер символов шрифта Courier.
Далее верхняя часть окна, где отображаются новые сообщения, закрашивается желтым цветом:
Метод paint класса FrameWindow
Этот метод просто вызывает метод paint из родительского класса Frame:
Метод windowClosing класса FrameWindow
Метод windowClosing реализован нами как часть интерфейса WindowListener:
Он получает управление, когда пользователь пытается закрыть окно приложения при помощи специально предназначенной для этого кнопки заголовка окна или комбинации клавиш.
Другие методы интерфейса WindowListener
Мы также реализовали и другие методы интерфейса WindowListener:
Наши реализации ничего не делают, однако определения этих методов необходимы для полноты интерфейса WindowListener.
События клавиатуры в JavaScript
При вводе с клавиатуры в javascript возникает сразу несколько событий, которые позволяют отследить коды нажатых клавиш и получить дополнительную полезную информацию для полного контроля над устройством ввода. Перейдём к теоретической и практической части.
События клавиатуры
В JS для клавиатуры используется 3 основных события:
Для избежания повторных вызовов «keydown» и «keypress» используйте свойство «repeat». Подробнее рассмотрим его позже.
В примерах использовался метод «addEventListener», но можно встретить и другие варианты:
Получение свойств событий
Для получения информации о клавише обратитесь к свойствам объекта «event».
Свойства key и keyCode
key — возвращает значение нажатой клавиши в виде строки. Например, «F», «5» или «Enter».
keyCode — возвращает числовой код. Для события «keypress» вернёт ASCII-код нажатого символа.
Примечание. Цифры на верхнем и боковом блоке клавиатуры имеют разные «keyCode».
Коды основных функциональных клавиш:
| Клавиша | Key | keyCode |
|---|---|---|
| Ввод | Enter | 13 |
| Стереть | Backspace | 8 |
| Удалить | Delete | 46 |
| Пробел | Space | 32 |
| Табулятор | Tab | 9 |
| Esc | Escape | 27 |
| Стрелка влево | ArrowLeft | 37 |
| Стрелка вверх | ArrowUp | 38 |
| Стрелка вправо | ArrowRight | 39 |
| Стрелка вниз | ArrowDown | 40 |
| Shift | Shift | 16 |
| Ctrl | Control | 17 |
| Alt | Alt | 18 |
Хорошей практикой в JavaScript считается использование «key», а не «keyCode». Это повышает читаемость кода и избавляет от необходимости запоминать соответствие кодов их значениям.
Свойства code и charCode
Актуальны только для события «keypress».
Не поддерживаются IE и старыми версиями других браузеров.
Свойства altKey, ctrlKey, shiftKey
Свойство type
Возвращает тип события в виде строки. Может использоваться, когда один обработчик применяется сразу для нескольких событий.
Свойство repeat
Возвращает логическое «true», если событие уже один раз отработало и автоматически вызывается снова. Подобная ситуация возникает при зажатии клавиши на длительное время — «keydown» и «keypress» начинают срабатывать повторно.
Пример проверки ввода в Input
Рассмотрим небольшой пример, в котором разрешим ввод в текстовое поле только нуля и единицы. Учитываем возможность стирания, удаления и табуляции.
Метод «preventDefault()» запрещает действие по умолчанию.
Применение предыдущего обработчика ко всем текстовыми полями на странице:
Коды клавиш
Поставьте курсор в поле ввода и нажмите любую клавишу:
Клавиатура: keydown и keyup
Прежде чем перейти к клавиатуре, обратите внимание, что на современных устройствах есть и другие способы «ввести что-то». Например, распознавание речи (это особенно актуально на мобильных устройствах) или Копировать/Вставить с помощью мыши.
События клавиатуры же должны использоваться, если мы хотим обрабатывать взаимодействие пользователя именно с клавиатурой (в том числе виртуальной). К примеру, если нам нужно реагировать на стрелочные клавиши Up и Down или горячие клавиши (включая комбинации клавиш).
Тестовый стенд
Для того, чтобы лучше понять, как работают события клавиатуры, можно использовать тестовый стенд ниже.
Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.
События keydown и keyup
Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.
event.code и event.key
Свойство key объекта события позволяет получить символ, а свойство code – «физический код клавиши».
К примеру, одну и ту же клавишу Z можно нажать с клавишей Shift и без неё. В результате получится два разных символа: z в нижнем регистре и Z в верхнем регистре.
Свойство event.key – это непосредственно символ, и он может различаться. Но event.code всегда будет тот же:
| Клавиша | event.key | event.code |
|---|---|---|
| Z | z (нижний регистр) | KeyZ |
| Shift + Z | Z (Верхний регистр) | KeyZ |
У каждой клавиши есть код, который зависит от её расположения на клавиатуре. Подробно о клавишных кодах можно прочитать в спецификации о кодах событий UI.
Существует несколько широко распространённых раскладок клавиатуры, и в спецификации приведены клавишные коды к каждой из них.
Можно их прочитать в разделе спецификации, посвящённом буквенно-цифровым клавишам или просто нажмите нужную клавишу на тестовом стенде выше и посмотрите.
Выглядит очевидно, но многие всё равно ошибаются.
| Клавиша | event.key | event.code |
|---|---|---|
| F1 | F1 | F1 |
| Backspace | Backspace | Backspace |
| Shift | Shift | ShiftRight или ShiftLeft |
Обратите внимание, что event.code точно указывает, какая именно клавиша нажата. Так, большинство клавиатур имеют по две клавиши Shift : слева и справа. event.code уточняет, какая именно из них была нажата, в то время как event.key сообщает о «смысле» клавиши: что вообще было нажато ( Shift ).
Допустим, мы хотим обработать горячую клавишу Ctrl + Z (или Cmd + Z для Mac). Большинство текстовых редакторов к этой комбинации подключают действие «Отменить». Мы можем поставить обработчик событий на keydown и проверять, какая клавиша была нажата.
С другой стороны, с event.code тоже есть проблемы. На разных раскладках к одной и той же клавише могут быть привязаны разные символы.
Например, вот схема стандартной (US) раскладки («QWERTY») и под ней немецкой («QWERTZ») раскладки (из Википедии):
Для одной и той же клавиши в американской раскладке значение event.code равно «Z», в то время как в немецкой «Y».
Звучит очень странно, но это и в самом деле так. В спецификации прямо упоминается такое поведение.
Чтобы отслеживать символы, зависящие от раскладки, event.key надёжнее.
С другой стороны, преимущество event.code заключается в том, что его значение всегда остаётся неизменным, будучи привязанным к физическому местоположению клавиши, даже если пользователь меняет язык. Так что горячие клавиши, использующие это свойство, будут работать даже в случае переключения языка.
Хотим поддерживать клавиши, меняющиеся при раскладке? Тогда event.key – верный выбор.
Или мы хотим, чтобы горячая клавиша срабатывала даже после переключения на другой язык? Тогда event.code может быть лучше.
Автоповтор
Действия по умолчанию
Действия по умолчанию весьма разнообразны, много чего можно инициировать нажатием на клавиатуре.
Предотвращение стандартного действия с помощью event.preventDefault() работает практически во всех сценариях, кроме тех, которые происходят на уровне операционной системы. Например, комбинация Alt + F4 инициирует закрытие браузера в Windows, что бы мы ни делали в JavaScript.
Добавим ему немного больше свободы:
Теперь стрелочки и удаление прекрасно работают.
«Дела минувших дней»
Итого
Главные свойства для работы с клавиатурными событиями:
В прошлом события клавиатуры иногда использовались для отслеживания ввода данных пользователем в полях формы. Это ненадёжно, потому как ввод данных не обязательно может осуществляться с помощью клавиатуры. Существуют события input и change специально для обработки ввода (рассмотренные позже в главе События: change, input, cut, copy, paste). Они срабатывают в результате любого ввода, включая Копировать/Вставить мышью и распознавание речи.
События клавиатуры же должны использоваться только по назначению – для клавиатуры. Например, чтобы реагировать на горячие или специальные клавиши.
Задачи
Отследить одновременное нажатие
Например, код ниже выведет alert при одновременном нажатии клавиш «Q» и «W» (в любом регистре, в любой раскладке)
Список кодов клавиш JavaScript – коды клавиш событий нажатия клавиш для ввода, пробела, возврата и т.д.
События клавиатуры JavaScript помогают фиксировать действия пользователя с клавиатурой.
Как и многие другие события JavaScript, KeyboardEvent интерфейс предоставляет все необходимые свойства и методы для обработки каждого нажатия клавиши, которое пользователь делает с помощью клавиатуры.
Было написано много статей о том, как они работают и как их использовать. В то же время W3.org продолжает обновлять спецификацию, вводя новые свойства, исключая существующие и отмечая определенный код как устаревший.
Из-за этого веб-разработчикам важно продолжать изучать KeyboardEvent интерфейс, чтобы знать, что именно им следует использовать, а что больше не актуально.
В этой статье мы узнаем о:
Надеюсь, тебе понравится.
Интерфейс KeyboardEvent предоставляет информацию с использованием определенных констант, свойств и одного метода (по состоянию на январь 2021 г.). Он расширяет UIEvent интерфейс, который в конечном итоге расширяет Event интерфейс.
Вы можете добавить каждый из этих типов событий к элементу или document объекту HTML с помощью addEventListener метода. Вот пример прослушивания keydown события для элемента с идентификатором ‘type-here’:
Если вы печатаете event объект в консоли браузера, вы увидите все его свойства и методы наряду с теми, которые он наследует от UIEvent и Event интерфейсов.
Я нажал клавишу a во время обработки keyup события
Прежде чем мы пойдем дальше, как насчет игровой площадки для изучения всех событий клавиатуры, их свойств, характеристик и так далее? Я думаю, будет здорово использовать его вместе с этой статьей и не только.
Просто наведите курсор на любое место в приложении, встроенном ниже, и введите любую клавишу, чтобы увидеть контекстную информацию о нем.
Вы также можете отфильтровать нужные события, сняв флажки вверху. Так что попробуйте:
Игровая площадка событий клавиатуры
Если у вас есть какие-либо проблемы с доступом к указанной выше игровой площадке, вы можете получить доступ к этому инструменту прямо здесь: https://keyevents.netlify.app/ И вы можете найти исходный код демонстрации здесь: https://github.com/ atapas / js-keyevents-demo
Если все три события привязаны к элементу DOM, порядок запуска будет следующим:
Среди этих событий наиболее часто используемым событием клавиатуры является (или должно быть), keydown потому что:
keydown против keyup
Со всем этим объяснением, keydown событие является явным победителем и должно стать самым популярным (используемым) ключевым типом события.
Это вопрос на миллиард долларов! Самый короткий ответ – это зависит от обстоятельств. Но на чем? Это зависит от:
Но прежде чем мы туда доберемся, давайте посмотрим на предварительный просмотр некоторых полезных свойств и методов KeyboardEvent интерфейса.
Последние три свойства устарели, и вам следует использовать это key свойство. key Свойство имеет широкую поддержку браузера.
Итак, пока вы не используете какие-либо старые браузеры, event.key свойства должно быть достаточно, чтобы вы могли идентифицировать ключ. Если вам необходимо поддерживать более старый браузер, лучшим вариантом будет event.which свойство.
Если ваш код использует какие-либо из устаревших свойств и у вас есть возможность реорганизовать этот код, всегда лучше пойти на это.
Изменить ключи
Ключевые комбинации
Мы можем комбинировать несколько клавиш и выполнять действия на основе сочетаний клавиш. Фрагмент кода ниже показывает, как объединить Control и z ключ для определения действия:
Вот еще один пример, демонстрирующий еще несколько комбинаций клавиш. Пожалуйста, попробуйте:
Попробуйте комбинации клавиш
| Имя ключа | event.which | event.key | event.code | Ноты |
|---|---|---|---|---|
| Backspace | 8 | Backspace | Backspace | |
| вкладка | 9 | Вкладка | Вкладка | |
| войти | 13 | Войти | Войти | |
| сдвиг (слева) | 16 | сдвиг | ShiftLeft | event.shiftKey правда |
| сдвиг (вправо) | 16 | сдвиг | ShiftRight | event.shiftKey правда |
| ctrl (слева) | 17 | Контроль | ControlLeft | event.ctrlKey правда |
| ctrl (справа) | 17 | Контроль | ControlRight | event.ctrlKey правда |
| alt (слева) | 18 | Все | AltLeft | event.altKey правда |
| alt (справа) | 18 | Все | AltRight | event.altKey правда |
| пауза / перерыв | 19 | Пауза | Пауза | |
| Caps Lock | 20 | CapsLock | CapsLock | |
| побег | 27 | Побег | Побег | |
| пространство | 32 | Космос | event.key Значение представляет собой единое пространство. | |
| страница вверх | 33 | PageUp | PageUp | |
| листать вниз | 34 | Листать вниз | Листать вниз | |
| конец | 35 | Конец | Конец | |
| Главная | 36 | Главная | Главная | |
| стрелка влево | 37 | Стрелка влево | Стрелка влево | |
| стрелка вверх | 38 | ArrowUp | ArrowUp | |
| правая стрелка | 39 | Стрелка вправо | Стрелка вправо | |
| стрелка вниз | 40 | Стрелка вниз | Стрелка вниз | |
| Снимок экрана | 44 | Снимок экрана | Снимок экрана | |
| вставить | 45 | Вставить | Вставить | |
| удалять | 46 | удалять | удалять | |
| 0 | 48 | 0 | Цифра 0 | |
| 1 | 49 | 1 | Цифра 1 | |
| 2 | 50 | 2 | Цифра 2 | |
| 3 | 51 | 3 | Цифра 3 | |
| 4 | 52 | 4 | Цифра 4 | |
| 5 | 53 | 5 | Цифра 5 | |
| 6 | 54 | 6 | Цифра 6 | |
| 7 | 55 | 7 | Цифра 7 | |
| 8 | 56 | 8 | Цифра 8 | |
| 9 | 57 | 9 | Цифра 9 | |
| а | 65 | а | KeyA | |
| б | 66 | б | KeyB | |
| c | 67 | c | KeyC | |
| d | 68 | d | KeyD | |
| является | 69 | является | KeyE | |
| ж | 70 | ж | KeyF | |
| g | 71 | g | KeyG | |
| час | 72 | час | KeyH | |
| i | 73 | i | KeyI | |
| j | 74 | j | KeyJ | |
| k | 75 | k | KeyK | |
| л | 76 | л | KeyL | |
| m | 77 | m | KeyM | |
| п | 78 | п | KeyN | |
| О | 79 | О | KeyO | |
| p | 80 | p | KeyP | |
| q | 81 | q | KeyQ | |
| р | 82 | р | KeyR | |
| s | 83 | s | KeyS | |
| т | 84 | т | KeyT | |
| u | 85 | u | KeyU | |
| v | 86 | v | KeyV | |
| в | 87 | в | KeyW | |
| Икс | 88 | Икс | KeyX | |
| и | 89 | и | KeyY | |
| с участием | 90 | с участием | KeyZ | |
| клавиша левого окна | 91 | Мета | MetaLeft | event.metaKey правда |
| клавиша правого окна | 92 | Мета | MetaRight | event.metaKey правда |
| клавиша выбора (контекстное меню) | 93 | Контекстное меню | Контекстное меню | |
| цифровая клавиатура 0 | 96 | 0 | Numpad0 | |
| цифровая клавиатура 1 | 97 | 1 | Numpad1 | |
| цифровая клавиатура 2 | 98 | 2 | Numpad2 | |
| цифровая клавиатура 3 | 99 | 3 | Numpad3 | |
| цифровая клавиатура 4 | 100 | 4 | Numpad4 | |
| цифровая клавиатура 5 | 101 | 5 | Numpad5 | |
| цифровая клавиатура 6 | 102 | 6 | Numpad6 | |
| цифровая клавиатура 7 | 103 | 7 | Numpad7 | |
| цифровая клавиатура 8 | 104 | 8 | Numpad8 | |
| цифровая клавиатура 9 | 105 | 9 | Numpad9 | |
| умножать | 106 | * | NumpadMultiply | |
| Добавить | 107 | + | NumpadAdd | |
| вычесть | 109 | – | Numpad: вычесть | |
| десятичная точка | 110 | . | NumpadDecimal | |
| делить | 111 | / | NumpadDivide | |
| f1 | 112 | F1 | F1 | |
| f2 | 113 | F2 | F2 | |
| f3 | 114 | F3 | F3 | |
| f4 | 115 | F4 | F4 | |
| f5 | 116 | F5 | F5 | |
| f6 | 117 | F6 | F6 | |
| f7 | 118 | F7 | F7 | |
| f8 | 119 | F8 | F8 | |
| f9 | 120 | F9 | F9 | |
| f10 | 121 | F10 | F10 | |
| f11 | 122 | F11 | F11 | |
| f12 | 123 | F12 | F12 | |
| числовой замок | 144 | NumLock | NumLock | |
| блокировка прокрутки | 145 | ScrollLock | ScrollLock | |
| отключение звука | 173 | AudioVolumeMute | ⚠️ В event.which Firefox значение 181. Также FF предоставляет кодовое значение как, VolumeMute | |
| громкость звука убавить | 174 | AudioVolumeDown | ⚠️ В event.which Firefox значение 182. Также FF предоставляет кодовое значение как, VolumeDown | |
| громкость звука | 175 | AudioVolumeUp | ⚠️ В event.which Firefox значение 183. Также FF предоставляет кодовое значение как, VolumeUp | |
| проигрыватель медиа | 181 | LaunchMediaPlayer | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, MediaSelect | |
| запустить приложение 1 | 182 | LaunchApplication1 | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, LaunchApp1 | |
| запустить приложение 2 | 183 | LaunchApplication2 | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, LaunchApp2 | |
| точка с запятой | 186 | ; | Точка с запятой | ⚠️ event.which Значение 59 в Firefox |
| знак равенства | 187 | Равно | ⚠️ event.which Значение 61 в Firefox | |
| пункт | 188 | , | Пункт | |
| рывок | 189 | – | Minus | ⚠️ event.which Значение 173 в Firefox |
| period | 190 | . | Period | |
| косая черта | 191 | / | Слэш | |
| Обратная цитата / серьезный акцент | 192 | ` | Обратная цитата | |
| открытая скобка | 219 | [ | Кронштейн: Левый | |
| обратная косая черта | 220 | Обратная косая черта | ||
| закрывающая скобка | 221 | ] | Кронштейн Правый | |
| одиночная кавычка | 222 | ‘ | Цитата |
Пожалуйста, обратите внимание:
Так что насчет виртуальных клавиатур, например, использования наших мобильных телефонов или планшетов или любых других устройств ввода?
В спецификации сказано, что если виртуальная клавиатура имеет такое же расположение клавиш и функциональность, что и стандартная клавиатура, то она должна иметь соответствующий атрибут кода. В противном случае он не вернет правильное значение.
На этом пока все. Спасибо, что дочитали до этого места! Подключимся. Вы можете @ меня в Twitter (@tapasadhikary) с комментариями или не стесняйтесь подписываться.
Научитесь программировать бесплатно. Учебная программа с открытым исходным кодом freeCodeCamp помогла более 40 000 человек получить работу в качестве разработчиков.Начать