Робота з подіями в jQuery. Частина 4

14

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення подій у jQuery. Раніше ми розглянули основні події миші, з якими вам доведеться працювати найчастіше. У цій статті ми познайомимося з найбільш корисними подіями клавіатури і подіями форм. Почнемо.

Отже, почнемо з подій клавіатури. Їх небагато, всього три події:

натискання — натискання клавіші;

keyup — відпускання клавіші;

keypress — натискання будь-яких клавіш, крім керуючих (Shift, Alt, Ctrl). Виникає після події натискання і по суті є аналогом події натискання.

У роботі вам, мабуть, стане в нагоді тільки метод keyup, що відповідає за відпускання клавіші, у всякому разі, вже частіше двох інших методів ви його будете використовувати — це точно. І давайте продемонструємо на практичному прикладі роботу з зазначеними подіями. У нас є поле форми:

І простий скрипт, який фіксує обробку для всіх трьох подій:

$(function(){
$(‘input’).натискання(function(){
console.log(‘keydown’);
}).keyup(function(){
console.log(‘keyup’);
}).keypress(function(){
console.log(‘keypress’);
});
});

Тепер спробуємо ввести в поле форми будь-який символ і натиснути на яку-небудь керуючу клавішу, наприклад Shift. Ось що ми отримаємо в консолі:

Работа с событиями в jQuery

Як бачимо, для клавішу з цифрою 1 спрацювали всі 3 події, а ось для клавіші Shift подія keypress вже не відпрацювала.

Що дає нам можливість відслідковувати дані події? Наприклад, ми можемо валідувати дані, що вводяться, на льоту, беручи кожен введений символ і перевіряючи, чи підходить нам він. Також ми можемо заборонити виконувати які-небудь дії. Як це зробити?

Кожна клавіша і введений символ має свій код. При цьому події натискання і keyup працюють саме з кодом клавіші, а keypress — з кодом символу. В чому різниця? Якщо вам потрібно точно знати, яка саме літера була введена, наприклад велика чи маленька буква, яка знаходиться на одній і тій самій клавіші, тоді вам потрібно подія keypress, яке поверне саме код символу. Якщо ж вам просто потрібно знати, яка клавіша була натиснута, тоді цілком підійде keyup або натискання. Коди символів і клавіш можна подивитися за посиланням.

В якості прикладу давайте спробуємо заблокувати, скажімо, введення цифри 0. В цьому нам допоможе властивість which, об’єкта, події, яке і містить код клавіші або символу:

$(‘input’).keypress(function(e){
if(e.which == 48) return false;
});

Тепер скільки б ми не намагалися ввести цифру нуль в поле форми — нічого не вийде. Замість keypress можна спробувати використовувати і keywodn, тільки в цьому випадку зверніть увагу, що в таблиці символів для цієї події є два коду клавіші 0, оскільки є 2 різні клавіші для цієї цифри — одна над літерами, друга — NumPad. Тому в даному випадку доведеться перевіряти код кожної з клавіш:

$(‘input’).натискання(function(e){
if(e.which == 48 || e.which == 96) return false;
});

На цьому ми зупинимося в цій статті. У наступній статті ми розглянемо події форм. Більше і jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!