Klaviatura: keydown va keyup

Klaviatura hodisalari foydalanuvchi tugmalarni bosganda kuzatiladi. Zamonaviy qurilmalarda matn kiritishning boshqa usullari ham bor (ovoz orqali kiritish, nusxa-joylashtirish), shuning uchun "matn kiritishini kuzatish" istasangiz, input hodisasi ko'pincha afzalroq. Klaviatura hodisalari esa aynan jismoniy tugmalar bilan ishlash kerak bo'lganda ishlatiladi — masalan, o'yin boshqaruvi yoki tez tugmalar (hotkey).

keydown va keyup hodisalari

Ikki asosiy hodisa bor:

• keydown — tugma bosilganda (pastga tushganda).
• keyup — tugma qo'yib yuborilganda (yuqoriga qaytganda).

document.addEventListener('keydown', function(event) {
  console.log('Bosildi. key: ' + event.key + ', code: ' + event.code);
});

document.addEventListener('keyup', function(event) {
  console.log('Qo'yib yuborildi');
});

event.key va event.code: asosiy farq

Har bir klaviatura hodisasida ikkita muhim xossa bor: event.key va event.code. Ularning farqini tushunish klaviatura bilan ishlashning asosidir.

• event.key — bu belgi (character)ning o'zi, ya'ni bosilgan natijada nima chiqishi. U tildan/registrdan/modifikatorlardan qat'i o'zgaradi.
• event.code — bu fizik tugma kodi, ya'ni klaviaturada qaysi jismoniy tugma bosilgani. U qaysi belgi chiqishidan qat'i nazar bir xil bo'lib qoladi.

Masalan, Z tugmasini bosganda:

// z tugmasi (kichik harf):     key = 'z',  code = 'KeyZ'
// Shift+Z (katta harf):        key = 'Z',  code = 'KeyZ'
// Boshqa til (masalan, rus tili) yoqilganda:
//                              key = boshqa harf, code = 'KeyZ'

Ko'rib turganingizdek, event.code aynan qaysi jismoniy tugmaga bog'liq va til/registrdan mustaqil. Shuning uchun "aynan shu tugma" muhim bo'lganda (masalan, o'yinda W A S D harakat tugmalari) event.code ishlatiladi. Aksincha, "foydalanuvchi qaysi harfni yozdi" muhim bo'lganda event.key ishlatiladi.

document.addEventListener('keydown', function(event) {
  // O'yinda 'W' tugmasi (klaviatura tilidan qat'i nazar)
  if (event.code === 'KeyW') {
    // oldinga harakat
  }
});

Avto-takror (auto-repeat)

Agar tugma uzoq bosib turilsa, avto-takror ishga tushadi: keydown hodisasi qayta-qayta chaqiriladi. Va nihoyat tugma qo'yib yuborilganda bitta keyup keladi.

Shunday holatda event.repeat xossasi true bo'ladi — bu bizga takroriy hodisalarni birinchi bosishdan ajratish imkonini beradi:

document.addEventListener('keydown', function(event) {
  if (event.repeat) {
    // Bu avto-takror (tugma bosib turibdi)
    return;
  }
  // Bu birinchi bosish
});

Standart harakatlar

Ko'p klaviatura amallari brauzerning standart harakatiga bog'langan. Masalan:

• Belgi tugmasi bosilsa — matn maydoniga belgi chiqadi.
• Delete bosilsa — belgi o'chiriladi.
• PageDown bosilsa — sahifa pastga skroll qilinadi.
• Ctrl+S bosilsa — brauzer sahifani saqlash oynasini ochadi.

Bu standart harakatlarni event.preventDefault() bilan bekor qilish mumkin. Masalan, matn maydonini faqat raqamlar qabul qiladigan qilib cheklashda:

input.addEventListener('keydown', function(event) {
  // Faqat raqamlar va boshqaruv tugmalariga ruxsat
  if (!checkPhoneKey(event.key)) {
    event.preventDefault();
  }
});

Qiyosiy amaliy misol: hotkey

Amaliy misol — Ctrl+B (yoki Mac'da Cmd+B) tez tugmasini ushlash. Modifikatorlar uchun (dars 1'da ko'rganimizdek) mos xossalar bor:

document.addEventListener('keydown', function(event) {
  // Windows/Linux'da Ctrl, Mac'da Cmd (metaKey)
  if ((event.ctrlKey || event.metaKey) && event.code === 'KeyB') {
    event.preventDefault(); // brauzer standartini to'xtatamiz
    // o'zimizning amalimiz, masalan matnni qalinlashtirish
  }
});

Eskirgan xossalar

Eski kodda quyidagi xossalarni uchratasiz — ularni ishlatmang:

• event.keyCode, event.charCode, event.which — hammasi eskirgan (deprecated). Ularning o'rniga event.key va event.code ishlating.

Xulosa

• keydown tugma bosilganda, keyup qo'yib yuborilganda ishga tushadi.
• event.key — belgining o'zi (til/registrga bog'liq); event.code — fizik tugma kodi (mustaqil).
• "Aynan shu tugma" kerak bo'lsa event.code, "qaysi harf" kerak bo'lsa event.key ishlating.
• Tugma bosib turilsa keydown takrorlanadi, event.repeat bilan buni aniqlash mumkin.
• Standart harakatni event.preventDefault() bekor qiladi, ammo ba'zi OT-darajasidagi tugmalar bunga bo'ysunmaydi.