базовый курс

ГРУППА КУРСА

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

События клавиатуры в JavaScript - это нажатие клавиш, при вводе текста в элементах формы. В работе с этими событиями есть определённая сложность, связанная с тем, что для них не обеспечена кроссбраузерность. При написании обработчиков иногда придётся делать отдельные функции для разных браузеров. А также, нужно тщательно проверять скрипты, содержащие обработчики событий клавиатуры в разных браузерах.

Событие keypress срабатывает для клавиш, при нажатии которых печатается символ, то есть буква, цифра или другой символ. Для клавиш, которые не добавляют символ, это событие не возникает. Например, нажатие клавиши ctrl не вызывает это событие. Хотя это только в теории. Например, в FireFox нажатие некоторых несимвольных клавиш вызывает событие. Объект события имеет свойство charCode, которое содержит код символа. Этого свойства нет в старых IE, вместо него используется свойство keyCode. Если в FireFox событие срабатывает на несимвольных клавишах, то charCode содержит 0. Коды символов начинаются с 32, и если их нужно использовать, то всё, что меньше 32, можно отфильтровать. Создадим страницу, добавим на неё поле для ввода и выведем символ, который в него печатается:

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<input id="inp">

JavaScript

10
11
12
13
14
15
16
var input=document.getElementById('inp');
input.onkeypress = function (event)
  {
  var sym=event.charCode;
  if (sym>=32)
  alert(String.fromCharCode(sym));
  };

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

Далеко не всегда нужно получать код конкретного символа. На практике при обработке событий клавиатуры в JavaScript чаще просто отслеживается ввод любого символа.

Объект события имеет свойства, содеращие информацию о нажатии клавиши вместе c shift, ctrl или alt. Эти свойства рассмотрены в теме о клике.

Событие keydown возникает при нажатии любой клавиши, а событие keyup возникает, когда эта клавиша отпущена. У объектов этих событий есть свойство keyCode, в котором содержится код клавиши. Это не код символа, а именно код клавиши, он не зависит от того, в какой раскладке была нажата клавиша. Коды клавиш с латинскими буквами совпадают с кодами заглавных букв. Коды клавиш с цифрами совпадают с кодами цифр. А остальные клавиши имеют какие-то свои коды и они не всегда одинаковые в разных браузерах. В основном, клавиша имеет одинаковый код во всех браузерах, но есть исключения. Добавим на страницу ещё одно поле для ввода и выведем код нажатой клавиши:

HTML код:

9
10
<br>
<input id="newinput">

JavaScript

19
20
21
22
var newinput=document.getElementById('newinput');
newinput.onkeydown = function (event) {
  alert(event.keyCode);
  };