От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Ранее мы рассмотрели основные события мыши, с которыми вам придется работать чаще всего. В этой статье мы познакомимся с наиболее полезными событиями клавиатуры и событиями форм. Начнем.
Итак, начнем с событий клавиатуры. Их немного, всего три события:
keydown — нажатие клавиши;
keyup — отпускание клавиши;
keypress — нажатие любых клавиш, кроме управляющих (Shift, Alt, Ctrl). Возникает после события keydown и по сути является аналогом события keydown.
В работе вам, пожалуй, пригодится только метод keyup, отвечающий за отпускание клавиши, во всяком случае, уж чаще двух прочих методов вы его будете использовать — это точно. И давайте продемонстрируем на практическом примере работу с указанными событиями. У нас есть поле формы:
|
1 |
<input type="text"> |
И простейший скрипт, фиксирующий обработку для всех трех событий:
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('input').keydown(function(){ console.log('keydown'); }).keyup(function(){ console.log('keyup'); }).keypress(function(){ console.log('keypress'); }); }); |
Теперь попробуем ввести в поле формы любой символ и нажать на какую-либо управляющую клавишу, например Shift. Вот что мы получим в консоли:
Как видим, для клавиши с цифрой 1 сработали все 3 события, а вот для клавиши Shift событие keypress уже не отработало.
Что дает нам возможность отслеживать данные события? Например, мы можем валидировать вводимые данные на лету, беря каждый введенный символ и проверяя, подходит ли нам он. Также мы можем запретить выполнять какие-либо действия. Как это сделать?
Каждая клавиша и введенный символ имеет свой код. При этом события keydown и keyup работают именно с кодом клавиши, а keypress — с кодом символа. В чем разница? Если вам нужно знать точно, какая именно буква была введена, например большая или маленькая буква, которая находится на одной и той же клавише, тогда вам нужно событие keypress, которое вернет именно код символа. Если же вам просто нужно знать, какая клавиша была нажата, тогда вполне подойдет keyup или keydown. Коды символов и клавиш можно посмотреть по ссылке.
В качестве примера давайте попробуем заблокировать, скажем, ввод цифры 0. В этом нам поможет свойство which, объекта события, которое и содержит код клавиши или символа:
|
1 2 3 |
$('input').keypress(function(e){ if(e.which == 48) return false; }); |
Теперь сколько бы мы ни пытались ввести цифру ноль в поле формы — ничего не получится. Вместо keypress можно попробовать использовать и keywodn, только в этом случае обратите внимание, что в таблице символов для данного события есть два кода клавиши 0, поскольку есть 2 разные клавиши для этой цифры — одна над буквами, вторая — NumPad. Поэтому в данном случае придется проверять код каждой из клавиш:
|
1 2 3 |
$('input').keydown(function(e){ if(e.which == 48 || e.which == 96) return false; }); |
На этом мы остановимся в данной статье. В следующей статье мы рассмотрим события форм. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
