Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Эмуляция нажатия на клавиши с помощью простого кода javascript

Доброго времени суток, дорогие подписчики и гости блога. Сегодня я хочу разобрать с вами достаточно интересную и полезную тему: «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>

Если данная публикация была вам полезна, то обязательно подписывайтесь на обновления блога. Здесь вы найдете еще много всего интересного и новенького. Буду благодарен за репосты моих статей с указанием ссылки на блог. До новых встреч! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 120 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: