Доброго времени суток, дорогие подписчики и гости блога. Сегодня я хочу разобрать с вами достаточно интересную и полезную тему: «JavaScript эмуляция нажатия клавиши».
Я расскажу вам, для чего и в каких случаях необходимо реализовывать имитацию нажатия на кнопки, представлю таблицу с наиболее популярными клавишами и их кодами, а также приведу примеры программного кода. Не буду больше тянуть с введением, давайте приступим к делу!
Имитация нажатия на кнопки клавиатуры? Но зачем!?
Если человек не сталкивается с определенной задачей, где необходимо реализовать что-то подобное, и при этом не имеет большого опыта веб-разработки, то ему достаточно сложно понять, зачем необходим рассматриваемый прием.
На самом деле эмуляцию нажатия реализуют достаточно часто. И вы не раз пользовались такими приемами на различных веб-сервисах. К примеру, у вас имеются какие-то поля для заполнения и определенная кнопка, которая их особым образом обрабатывает (не submit).
Вам нужно реализовать такую фичу, чтобы при нажатии пользователем на Enter вызывался обработчик вашей кнопки, т.е. происходила имитация нажатия на пользовательский элемент.
Другой пример. Вы пишите игру, в которой есть панель управления движением персонажа. Вам необходимо, чтобы при нажатии на стрелки клавиатуры (вверх, вниз, влево или вправо) срабатывали кнопки на панели, будто пользователь нажимает их в игровом поле.
Иногда такие приемы, к моему большому огорчению, используются хитрецами в спаме или других навязчивых всплывающих окнах.
Как пример можно привести такую ситуацию. Перед вами всплывает окно с рекламой, предлагающей переход на какой-то сомнительный ресурс. При этом по стандарту сверху справа находится кнопка закрытия. Однако по щелчку на спасительный крестик срабатывает переход на этот пакостный ресурс.
Это также иногда реализуется имитационным подходом: либо срабатывает не то событие, либо создается поверх рекламы большой прозрачный блок, который обрабатывается, как клавиша перехода.
Займемся расшифровкой кодов
Каждая кнопка клавиатуры имеет свой определенный код, по которому и идет распознание ее нажатия и обработка события. При верстке веб-приложений иногда просто необходимо узнать, какое значение отвечает за ту или иную клавишу. Для этого я прикрепил табличное представление с данной информацией.8 | BackSpace | 27 | Ecs | 112 | F1 |
9 | Tab | 32 | Space (пробел) | 113 | F2 |
13 | Enter | 36 | Home | 116 | F5 |
16 | Shift | 37 | Стрелка влево | 120 | F9 |
17 | Ctrl | 38 | Стрелка вверх | 121 | F10 |
18 | Alt | 39 | Стрелка вправо | 122 | F11 |
19 | Pause | 40 | Стрелка вниз | 123 | F12 |
20 | CapsLock | 46 | Delete | 144 | NumLock |
В таблице представлены наиболее часто используемые кнопки. Если же для реализации поставленной задачи понадобятся коды других клавиш или символов, например, с кириллицы, то воспользуйтесь информацией с данного веб-сайта:
http://jquery.page2page.ru/index.php5/Коды_символов_и_клавиш
Время примерчиков
Ну а теперь пришло время показать вам пример реализации эмуляции нажатия на кнопку.
Итак, пользователю задается вопрос, ответ на который ему следует вписать в текстовое поле и после нажать на клавишу «Проверить». Щелчок и обработка события совершается двумя способами: либо при помощи клавиатуры, а точнее Enter-а, либо с помощью клика курсором мышки по кнопке.
Программная реализация приложения выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE HTML> <html> <head> <title>Пример имитации нажатия на button</title> <meta charset="utf-8"> <style> body { background: #F8F8FF; } p{ text-decoration: underline; color: green; text-align: center; } h3 { color: blue; } #PressEnter { padding: 11px; background: blue; box-shadow: 1px 1px 3px #010, 2px 2px 11px #010; color: #fff; border: none; } #answer { padding: 7px; } </style> </head> <body> <p>Отправить реультат на проверку можно при помощи предложенной клавиши или при помощи нажатия на Enter.</p> <h3>Сколько лап у Птицееда сине-зеленого (это паук)?</h3> <input type="text" id="answer" onkeyup="PressAfterText()"> <input type="button" id="PressEnter" value="Проверить" onclick="CheckAnswer()"> <script> function PressAfterText(e) { e = e || window.event; if (e.keyCode === 13) { document.getElementById("PressEnter").click(); } return false; } function CheckAnswer() { alert('Была нажата кнопка Проверить.'); if(document.getElementById("answer").value ==10) alert('Ответ верный!'); else alert('Ответ неверный. Их 10.'); } </script> </body> </html> |
Если данная публикация была вам полезна, то обязательно подписывайтесь на обновления блога. Здесь вы найдете еще много всего интересного и новенького. Буду благодарен за репосты моих статей с указанием ссылки на блог. До новых встреч! Пока-пока!
С уважением, Роман Чуешов