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

Для обработки событий клавиатуры в jQuery предназначены следующие методы.

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>]) {
   // ...
}

Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event. Например, чтобы получить код нажатой клавиши, можно воспользоваться свойством keyCode. В качестве примера получим код нажатой клавиши и продемонстрируем последовательность прохождения событий (листинг 6.3).

Листинг 6.3. События клавиатуры

<!doctype html>
<html>
<head>
<title>События клавиатуры</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":text").keyup(function(e){
      $("#div1").append("keyup " + e.keyCode + "<br>");
   });
   $(":text").keydown(function(e){
      $("#div1").append("keydown " + e.keyCode + "<br>");
   });
   $(":text").keypress(function(e){
      $("#div1").append("keypress " + e.keyCode + "<br>");
   });
  
});
</script>
</head>
<body>
<input type="text">
<div id="div1"></div>
</body>
</html>

Выделите текстовое поле и нажмите какую-либо клавишу на клавиатуре. Например, нажмем клавишу <А> при русской раскладке клавиатуры. В итоге получим следующее сообщение.

keydown 70
keypress 1072
keyup 70
Предыдущая статья Все статьи Следующая статья