Klaviatura hodisalari JavaScript'da: keydown, key va code farqi, tezkor tugmalar

Qisqacha: Tugma bosilganda keydown, qo'yib yuborilganda keyup keladi. event.key — bosilgan belgi ("a", "A", "?", "Escape"), event.code — klaviaturadagi jismoniy joy ("KeyA", "Slash"). Tezkor tugma yasashda ikkalasining farqi muhim: belgi kerak bo'lsa — key, til tartibidan qat'i nazar bir xil joy kerak bo'lsa — code. Mehmon maydonga yozayotganda tezkor tugmalar ishlamasligi kerak.

Bu darsda

• keydown va keyup qaysi elementga kelishini va nega avval fokus kerakligini tushunasiz.
• key va code farqini haqiqiy qiymatlar bilan bilasiz va to'g'risini tanlay olasiz.
• Ctrl, Cmd, Shift, Alt bilan tezkor tugmalar va repeat, isComposing tuzoqlarini bilasiz.
• Maydonga yozishga xalaqit bermaydigan va ekran o'quvchiga qulay tezkor tugmalar yasaysiz.
• Portfolio menyusida Escape qanday ishlashini tekshirib, uni buzib qo'ymaslikni o'rganasiz.

Oldin bilishingiz kerak: Listener opsiyalari: once, passive, signal, Sichqoncha, pointer va touch hodisalari, Klaviatura va fokus boshqaruvi, Fokus va tahrir atributlari.

1. Nega bu kerak?

Jasur aka kassada kun bo'yi buyurtma yozadi. Har safar sichqoncha bilan "Qidirish" maydonini topib bosish uni charchatadi. U so'radi: "Bitta tugma bossam, qidiruvga o'tsa bo'lmaydimi?" GitHub va YouTube'da shunday: / bosilsa — qidiruv maydoni.

Ikkinchi holat — Bobur. U sichqoncha ishlatmaydi, faqat klaviatura bilan yuradi (Klaviatura va fokus). Mobil menyuni ochdi — endi uni qanday yopadi? Odatiy javob — Escape. Lekin Escape ni brauzer o'zi faqat <dialog> va popover'da qiladi. Oddiy menyuda buni JavaScript yozishi kerak.

Fokus va tahrir atributlari darsida accesskey ni ko'rib, "haqiqiy tezkor tugmalar JavaScript bilan yasaladi" degan edik. Bu dars — o'sha va'da. Lekin ehtiyot bo'ling: noto'g'ri yasalgan tezkor tugma mehmonga yordam bermaydi, aksincha, uning yozishiga xalaqit beradi.

2. keydown va keyup

2.1 Birinchi tinglovchi

Klaviaturaning ikki asosiy hodisasi bor:

• keydown — tugma bosildi (pastga tushdi).
• keyup — tugma qo'yib yuborildi.

Uchinchisi — keypress — eskirgan (deprecated). Eski kodda uchratasiz, yangi kodda yozmang.

<p>Avval shu oynaga bosing, keyin istalgan tugmani bosing.</p>
<script>
  document.addEventListener("keydown", (event) => {
    const { key, code } = event;
    console.log(`keydown — key: "${key}", code: ${code}`);
  });
  document.addEventListener("keyup", (event) => {
    console.log(`keyup — key: "${event.key}"`);
  });
</script>

a tugmasini bir marta bosing — konsolda ikki qator chiqadi (sahifa ochilganda konsol bo'sh):

keydown — key: "a", code: KeyA
keyup — key: "a"

2.2 Hodisa qayerga keladi?

Sichqoncha hodisasi kursor ostidagi elementga keladi. Klaviatura hodisasining esa kursori yo'q. U fokusdagi elementga keladi: maydonga yozsangiz — maydonga, tugmada tursangiz — tugmaga. Hech narsa fokusda bo'lmasa — document.body ga. Keyin u odatdagidek bubble qilib document gacha ko'tariladi.

Shuning uchun jonli oynada avval oynaning ichiga bosish kerak. Fokus dars sahifasida tursa, tugmalar o'sha sahifaga ketadi, oynaga emas.

Bundan ikki amaliy qoida chiqadi:

• Butun sahifaga tegishli tezkor tugma — document da tinglanadi.
• Oddiy <div> ga keydown qo'ysangiz, u hech qachon kelmaydi: div fokus olmaydi. Fokus oladigan elementlar — Klaviatura va fokus darsida.

Tekshirib ko'ring: Bron formasidagi "Ism" maydonida turib Escape bosildi. Tinglovchilar document da va formada bor. Hodisa qayerdan boshlanadi va qaysi tinglovchilar ishlaydi?

3. key va code: belgi va joy

3.1 Haqiqiy qiymatlar

key — tugma bosilganda qaysi belgi chiqishi. code — klaviaturada qaysi joydagi tugma bosilgani, til va Shift dan qat'i nazar. Quyidagi qiymatlarni Chrome'da US klaviatura tartibida tekshirdik:

Jadvaldan uch xulosa:

• Shift bilan key o'zgaradi ("a" → "A", "1" → "!"), code esa o'zgarmaydi.
• Belgisiz tugmalarning key i — nomi: "Enter", "Escape", "Backspace", "Tab", "ArrowLeft".
• Bo'sh joyning key i — " " (bitta probel), "Space" emas. Bu ko'p uchraydigan xato.

Hayotdan o'xshatish: choyxonadagi stollarning raqami (code) va unda o'tirgan mehmon (key). 3-stol har doim 3-stol — kim o'tirmasin. Mehmon esa har kuni boshqa. "3-stolga choy olib bor" (joy) va "Jasur akaga choy olib bor" (kim) — ikki xil buyruq.

3.2 Boshqa til tartibida

Farq boshqa til tartibiga o'tganda yaqqol ko'rinadi. O'zbekistonda ko'pchilik lotin va rus tartiblari orasida almashib yozadi. Rus tartibi yoqilgan bo'lsa, K joyidagi tugma key: "л" beradi, code esa baribir KeyK.

O'zbek tartiblari haqida: kompyuteringizda lotin o'zbek klaviatura tartibi bo'lmasligi mumkin — ko'p kompyuterlarda o'zbekcha faqat «Uzbek Cyrillic» (kirill) turadi. Shuning uchun lotinda yozadiganlar odatda US tartibidan foydalanadi: o' — o va ' tugmasi (Quote). Kirill tartibida esa key kirill harf bo'ladi, code — o'sha jismoniy joy.

Demak, qaysi birini tanlaymiz?

Bitta nozik joy: code jismoniy joyni bildiradi, lekin Fransiyadagi kabi boshqa tartiblarda harflar boshqa joyda turadi. U yerda KeyQ joyida A yozilgan. Bizning auditoriya uchun Ctrl + harfda code — amaliy tanlov.

3.3 Chap yoki o'ng: ikki xil Shift

Klaviaturada ba'zi tugmalar ikki nusxada: chap va o'ng Shift, Ctrl, Alt. Raqamlar ham ikki joyda bor — harflar ustida va o'ngdagi raqamlar blokida. key ularni farqlamaydi: ikkala Shift ham "Shift". code esa farqlaydi: ShiftLeft va ShiftRight, Digit1 va Numpad1.

Xuddi shu ma'lumotni event.location son bilan beradi: 0 — oddiy tugma, 1 — chapdagi, 2 — o'ngdagi, 3 — raqamlar bloki. Kundalik saytda bu deyarli kerak emas. Lekin kalkulyator yoki kassa dasturida raqamlar blokini alohida ishlatish kerak bo'lsa — shu yerdan bilasiz.

Qisqasi: key — "nima yozildi", code — "qaysi tugma", location — "tugma klaviaturaning qaysi qismida".

3.4 Eski xususiyatlar: keyCode va which

Eski kodda bunday tekshiruvni ko'p uchratasiz:

// ❌ eskirgan: raqamni yodlash kerak, tartiblarda ishonchsiz
if (event.keyCode === 27) {
  menyuniYop();
}

// ✅ zamonaviy: o'qilishi aniq
if (event.key === "Escape") {
  menyuniYop();
}

keyCode va which — raqamli kodlar (27 — Escape, 65 — A). Ular eskirgan: har tugmaning raqamini yodlash kerak va har xil tartibda ishonchsiz. Yangi kodda faqat key va code.

Tekshirib ko'ring: "Savatga qo'shish" uchun + tezkor tugmasi kerak. US klaviaturada + uchun Shift va = bosiladi, raqamlar blokida esa alohida + bor. key bilan tekshirasizmi yoki code bilan?

4. Modifikatorlar: Ctrl, Cmd, Shift, Alt

4.1 To'rt xususiyat

Modifikator (modifier) — o'zi hech narsa yozmaydigan, boshqa tugma ma'nosini o'zgartiradigan tugma. Ular bosilganmi — hodisaning to'rt mantiqiy xususiyati aytadi:

• ctrlKey — Ctrl;
• shiftKey — Shift;
• altKey — Alt (Mac'da Option);
• metaKey — Mac'da Cmd (), Windows'da Win tugmasi.

Mac foydalanuvchilari Ctrl+S o'rniga Cmd+S ga o'rganib qolgan. Shuning uchun tezkor tugma odatda ikkalasini qabul qiladi: event.ctrlKey || event.metaKey.

4.2 Ctrl+K — qidiruvga o'tish

<label for="qidiruv">Taom qidirish</label>
<input type="search" id="qidiruv" aria-keyshortcuts="Control+K">
<p>Oynaga bosing va <kbd>Ctrl</kbd>+<kbd>K</kbd> ni bosing.</p>
<script>
  const qidiruv = document.getElementById("qidiruv");
  document.addEventListener("keydown", (event) => {
    const ctrl = event.ctrlKey || event.metaKey;
    if (ctrl && event.code === "KeyK") {
      event.preventDefault();
      qidiruv.focus();
      console.log("Ctrl+K: qidiruv maydoniga o'tildi");
    }
  });
</script>

Oynadagi matnga bosing, keyin Ctrl+K ni bosing: kursor qidiruv maydoniga o'tadi va konsolda Ctrl+K: qidiruv maydoniga o'tildi chiqadi.

Kodning uch qismi:

• event.code === "KeyK" — rus tartibida ham ishlaydi, Shift bosilgan bo'lsa ham.
• event.preventDefault() — Chrome'da Ctrl+K ning o'z vazifasi bor (manzil satrida qidiruv). Uni to'xtatmasak, ikkalasi birga ishlardi.
• qidiruv.focus() — elementga fokus berish. Uni Fokus, scroll va resize hodisalari darsida batafsil ko'ramiz.

aria-keyshortcuts="Control+K" atributi nima? U ekran o'quvchiga "bu maydonning tezkor tugmasi bor" deb aytadi. Malika NVDA bilan qidiruv maydoniga kelganda shuni eshitadi. Ko'zi ko'radigan mehmon uchun esa sahifada <kbd> bilan yozib qo'ying (Matn semantikasi).

Diqqat: Brauzerning hamma tezkor tugmasini to'xtatib bo'lmaydi. Ctrl+T (yangi tab), Ctrl+W (tabni yopish), Ctrl+N (yangi oyna) sahifaga umuman kelmaydi — brauzer ularni o'zi oladi. To'xtatsa bo'ladiganlarini ham (Ctrl+S, Ctrl+P, Ctrl+F) to'xtatishdan oldin o'ylang: mehmon ularning odatiy ishini kutadi.

4.3 Caps Lock yoqilganmi?

getModifierState("CapsLock") — Caps Lock holatini aytadi. Eng foydali joyi — parol maydoni: "Caps Lock yoqilgan" degan ogohlantirish mehmonni "parol noto'g'ri" xatosidan saqlaydi.

parol.addEventListener("keydown", (event) => {
  ogohlantirish.hidden = !event.getModifierState("CapsLock");
});

5. Ikki tuzoq: repeat va isComposing

5.1 Bosib turilgan tugma

Tugmani bosib tursangiz, bir lahzadan keyin keydown qayta-qayta keladi — matn maydonida aaaaaa shunday yoziladi. Har takror hodisada event.repeat — true:

<p>Oynaga bosing, keyin <kbd>Enter</kbd> ni bosib turing.</p>
<p id="holat">Bosildi: 0, takror: 0</p>
<script>
  const holat = document.getElementById("holat");
  let bosildi = 0;
  let takror = 0;
  document.addEventListener("keydown", (event) => {
    if (event.key !== "Enter") {
      return;
    }
    if (event.repeat) {
      takror++;
    } else {
      bosildi++;
    }
    holat.textContent = `Bosildi: ${bosildi}, takror: ${takror}`;
  });
</script>

Enter ni bir soniya bosib tursangiz, "Bosildi: 1" qoladi, "takror" esa tez o'sadi. Buyurtma yuboradigan tezkor tugmada takrorlarni albatta o'tkazib yuboring: if (event.repeat) return;. Aks holda bosib turilgan bitta tugma o'nta buyurtma yuboradi.

5.2 IME va isComposing

Xitoy, yapon, koreys tillarida harf to'g'ridan-to'g'ri yozilmaydi. IME (Input Method Editor) — bir nechta tugmadan bitta belgi "yig'adigan" dastur. Mehmon tovushlarni yozadi, IME variantlarni ko'rsatadi, mehmon Enter bilan tanlaydi.

Shu paytdagi keydown da event.isComposing — true. Biz Chrome'da IME holatini taqlid qilib tekshirdik: key — "Process", keyCode — 229, isComposing — true bo'ldi.

Bu nega muhim? Chat yoki izoh maydonida "Enter — yuborish" qilsangiz, yapon mehmon so'zni tanlash uchun Enter bosganda xabar yarim holida jo'nab ketadi. To'g'risi:

izoh.addEventListener("keydown", (event) => {
  if (event.key === "Enter" && !event.isComposing) {
    izohniYubor();
  }
});

Yana bir sabab — telefon. Android'dagi ekran klaviaturalari ko'p harflar uchun keydown da aniq key bermaydi (ko'pincha "Unidentified" va keyCode 229). Shuning uchun yozilgan matn bilan ishlash — keydown ning emas, input hodisasining ishi (input va change). keydown — tezkor tugmalar va Escape, Enter, strelkalar uchun.

Baseline ma'lumotiga ko'ra isComposing 2026-yil sentyabrdan barcha asosiy brauzerlarda bor — Safari 27 oxirgi bo'lib qo'shdi. Chrome va Firefox'da u ancha oldin bor edi.

6. Tugmada Enter va bo'sh joy

Sichqoncha hodisalari darsida click klaviaturadan ham kelishini aytgan edik. Endi buni ko'ramiz:

<button type="button" id="bron">Stolni band qilish</button>
<script>
  const bron = document.getElementById("bron");
  bron.addEventListener("keydown", (event) => {
    console.log(`keydown: ${event.code}`);
  });
  bron.addEventListener("keyup", (event) => {
    console.log(`keyup: ${event.code}`);
  });
  bron.addEventListener("click", (event) => {
    console.log(`click, detail: ${event.detail}`);
  });
</script>

Oynaga bosing, Tab bilan tugmaga o'ting va Enter ni bosing. Keyin bo'sh joyni bosing. Konsolda (tekshirdik):

keyup: Tab
keydown: Enter
click, detail: 0
keyup: Enter
keydown: Space
keyup: Space
click, detail: 0

Birinchi qator kutilmagandir: keyup: Tab. Tab bosilganda fokus hali tugmada emas edi, shuning uchun keydown: Tab tugmaga kelmadi. Fokus tugmaga o'tdi va Tab qo'yib yuborilganda keyup endi tugmaga keldi. «Hodisa qayerga keladi?» bo'limidagi qoida amalda: klaviatura hodisasi o'sha paytda fokusda turgan elementga keladi.

Yana ikki qiziq fakt:

• Enter da click tugma bosilganda keladi, bo'sh joyda — qo'yib yuborilganda. Bu brauzerning odatiy xulqi.
• Klaviaturadan kelgan click da detail — 0. Sichqonchada 1, 2... edi. Demak, detail === 0 — "klaviatura bilan bosildi" degani.

Asosiy saboq: <button> uchun keydown da Enter ni o'zingiz tekshirishingiz shart emas. click tinglovchisi klaviaturani o'zi qamraydi. keydown faqat tugmada yo'q tugmalar uchun kerak: Escape, strelkalar, tezkor tugmalar.

Tekshirib ko'ring: Aziz "Buyurtma berish" tugmasiga ikkita tinglovchi qo'ydi: click va "keydown da Enter bo'lsa — buyurtma". Bobur tugmada turib Enter ni bosdi. Nechta buyurtma ketdi?

7. Tezkor tugmani to'g'ri yasash

7.1 Eng katta xato: yozayotgan mehmonni "o'g'irlash"

/ — qidiruv tezkor tugmasi. Faraz qiling, Malika izoh yozyapti: "Osh/manti — ikkalasi ham zo'r". U / ni bosganda kursor qidiruvga sakrab ketadi, izoh esa chala qoladi. Bunday tezkor tugma — yordam emas, to'siq.

Qoida: harf yoki belgi tezkor tugmasi mehmon maydonga yozayotganda ishlamasin. Maydon — input, textarea, select va contenteditable (o'zi tahrirlanadigan element, Global atributlar).

Tekshiruv tartibi diagrammada:

flowchart TD
  A["keydown keldi"] --> B{"Boshqa kod to'xtatganmi?"}
  B -->|ha| X["Hech narsa qilmaymiz"]
  B -->|yo'q| C{"Maydonga yozyaptimi?"}
  C -->|ha| X
  C -->|yo'q| D{"Ctrl, Alt yoki Cmd bosilganmi?"}
  D -->|ha| X
  D -->|yo'q| E{"Tugma bizniki?"}
  E -->|yo'q| X
  E -->|ha| F["preventDefault va ish"]

Nimaga qarang: "Hech narsa qilmaymiz" ga to'rt yo'l olib boradi, ishga esa faqat bittasi. Yaxshi tezkor tugma ko'pincha "jim turadi".

7.2 To'liq misol: / va ?

<label for="qidiruv">Taom qidirish</label>
<input type="search" id="qidiruv" aria-keyshortcuts="/">
<p>Tezkor tugmalar: <kbd>/</kbd> — qidiruv, <kbd>?</kbd> — yordam.</p>
<p id="yordam" hidden>/ — qidiruv, ? — shu yordam, Esc — yopish</p>
<script>
  const qidiruv = document.getElementById("qidiruv");
  const yordam = document.getElementById("yordam");

  function yozyaptimi(element) {
    const maydon = "input, textarea, select, [contenteditable]";
    return element.closest(maydon) !== null;
  }

  document.addEventListener("keydown", (event) => {
    if (event.defaultPrevented || yozyaptimi(event.target)) {
      return;
    }
    if (event.ctrlKey || event.metaKey || event.altKey) {
      return;
    }
    if (event.key === "/") {
      event.preventDefault();
      qidiruv.focus();
      console.log("/ — qidiruvga o'tildi");
    } else if (event.key === "?") {
      yordam.hidden = !yordam.hidden;
      const holat = yordam.hidden ? "yopildi" : "ochildi";
      console.log(`? — yordam ${holat}`);
    } else if (event.key === "Escape" && !yordam.hidden) {
      yordam.hidden = true;
      console.log("Esc — yordam yopildi");
    }
  });
</script>

Sinab ko'ring (biz shu tartibda tekshirdik):

1. Matnga bosing va ? ni bosing — yordam qatori chiqadi, konsolda ? — yordam ochildi. Esc — yopiladi.
2. / ni bosing — kursor qidiruvga o'tadi, maydonda / belgisi yo'q: preventDefault uni yozdirmadi.
3. Endi maydonning ichida / va ? ni bosing — ular oddiy belgi bo'lib yoziladi, konsol jim. yozyaptimi tekshiruvi ishladi.

Kodda tushuntirilmagan ikki narsa:

• event.defaultPrevented — boshqa kod (masalan, sahifadagi boshqa vidjet) bu tugmani allaqachon "o'ziga olgan"mi (Event obyekti). Olgan bo'lsa, biz aralashmaymiz.
• ? uchun Shift bosiladi, lekin biz shiftKey ni to'xtatmadik. key allaqachon "?" — Shift uning bir qismi.

preventDefault ni faqat tugma bizniki bo'lganda chaqiramiz. Agar uni har keydown da chaqirsangiz, sahifada hech narsa yozib bo'lmay qoladi, Tab ham ishlamaydi.

Tekshirib ko'ring: "Tahrirlab ko'rish" bilan yozyaptimi tekshiruvini olib tashlang. Endi qidiruv maydoniga "osh/manti" deb yozmoqchi bo'lsangiz, nima bo'ladi?

8. Tezkor tugmalar va qulaylik

Tezkor tugmalar klaviatura bilan ishlaydiganlar uchun katta yordam. Lekin ular boshqalarga xalaqit bermasligi uchun bir necha qoida bor.

Bitta belgili tugmalar. WCAG 2.1.4 (Character Key Shortcuts, A daraja) talabi: faqat bitta harf yoki belgidan iborat tezkor tugma bo'lsa, quyidagilardan biri bajarilsin:

• mehmon uni o'chira oladi;
• uni boshqa tugmaga almashtira oladi (masalan, Ctrl bilan);
• u faqat ma'lum element fokusda bo'lganda ishlaydi.

Nega bunday qattiq? Ovoz bilan boshqaradigan dasturlar gapni harflarga aylantiradi. Odam "salom" desa, sahifa s, a, l tezkor tugmalarini "bosilgan" deb qabul qilishi mumkin.

Ekran o'quvchilar. NVDA "ko'rib chiqish" rejimida bitta harfli tugmalarni o'zi ishlatadi: H — keyingi sarlavha, K — keyingi havola. Malika H bosganda u sahifaga yetib bormaydi. Demak, Malika uchun bitta harfli tugmalar baribir ishlamaydi. Unga aria-keyshortcuts va ko'rinadigan yo'l (tugma, havola) kerak.

Ko'rinadigan bo'lsin. Hech kim yashirin tugmani topa olmaydi. Odatiy yechim — ? bosilganda tezkor tugmalar ro'yxati (GitHub, Gmail shunday qiladi) va tugma yonida <kbd>.

Brauzer va tizimnikini bosmang. Ctrl+F (qidirish), Ctrl+L, Alt+← (orqaga) — mehmon ularni kutadi.

Shuningdek, ARIA Authoring Practices darsidagi tayyor naqshlar (tabs, menyu) qaysi tugma nima qilishini allaqachon belgilab bergan. O'z komponentingizda shu tugmalarni ishlating. Fokusni boshqarish va murakkab vidjetlarning to'liq klaviatura qoidalari — Dinamik UI'da qulaylik darsida.

Tekshirib ko'ring: Choyxona saytida m — "Menyuga o'tish" tezkor tugmasi qo'yildi. WCAG 2.1.4 bo'yicha nima yetishmaydi va qanday tuzatish mumkin?

9. DevTools'da klaviatura hodisalarini kuzatish

Tezkor tugma ishlamasa, birinchi savol: "hodisa umuman kelyaptimi va unda nima bor?" Har safar console.log yozish shart emas. DevTools konsolida tayyor yordamchi bor (DOM daraxti darsidagi $0 ning qarindoshi):

monitorEvents(document.body, "key");   // klaviatura hodisalari
unmonitorEvents(document.body);        // kuzatishni to'xtatish

monitorEvents dan keyin sahifada tugma bossangiz, konsolda har keydown va keyup to'liq hodisa obyekti bo'lib chiqadi. Uni ochib key, code, ctrlKey, repeat ni ko'rasiz. "key" — klaviatura hodisalari guruhi. Xuddi shunday "mouse", "focus" guruhlari ham bor. monitorEvents faqat DevTools konsolida ishlaydi — kodingizga yozmang.

Ikkinchi yordamchi — Elements panelidagi Event Listeners yorlig'i. Elementni tanlang va o'ng tomonda keydown bandini oching. Shu elementga va uning ota-bobolariga (document gacha) qo'yilgan barcha klaviatura tinglovchilari ro'yxati chiqadi. Har biri yonida — qaysi faylning qaysi qatorida yozilgani. Bosilsa, Sources paneli o'sha qatorni ochadi.

"Tinglovchi bor, lekin ishlamayapti" holatida ko'pincha uch sababdan biri chiqadi: fokus boshqa joyda (masalan, iframe ichida), boshqa tinglovchi stopPropagation qilgan yoki shart noto'g'ri ("Space" o'rniga " "). Konsolda hodisaning o'zini ko'rsangiz, uchalasi ham darhol aniqlanadi.

10. Ko'p uchraydigan xatolar

10.1 Bo'sh joyni "Space" deb tekshirish

event.key === "Space" hech qachon true bo'lmaydi: bo'sh joyning key i — " ". "Space" — uning code i. Tuzatish: event.key === " " yoki event.code === "Space".

10.2 Shift bilan katta harf

event.key === "k" — Shift+K da ishlamaydi, chunki key "K" bo'ladi. Caps Lock yoqilgan bo'lsa ham shunday. Tuzatish: harfli Ctrl tezkor tugmalarida code ("KeyK").

10.3 Tezkor tugma maydonda ham ishlaydi

Mehmon ? yozmoqchi edi — yordam oynasi ochildi. Tuzatish: yozyaptimi(event.target) tekshiruvi («Tezkor tugmani to'g'ri yasash» bo'limida).

10.4 Hamma tugmada preventDefault

// ❌ butun sahifada yozish va Tab ishlamay qoladi
document.addEventListener("keydown", (event) => {
  event.preventDefault();
  if (event.key === "/") {
    qidiruv.focus();
  }
});

Tuzatish: preventDefault — faqat o'zingiz ishlatgan tugma uchun, if ichida.

10.5 Eski nomlar: "Esc", keypress, keyCode

Juda eski brauzerlar Escape uchun "Esc" bergan. Internetdagi eski maqolalarda keypress va keyCode === 13 ni uchratasiz. Zamonaviy brauzerlarda: "Escape", keydown, key/code.

11. Mashqlar

1-mashq (oson): key va code ni toping

«keydown va keyup» bo'limidagi birinchi oynada tugmalarni bosib, jadvalni to'ldiring. Avval o'zingiz taxmin qiling, keyin tekshiring.

Qiymatlarni qo'shtirnoqsiz yozing:

• Shift + 2: key — [:@], code — [:Digit2]
• Backspace: key — [:Backspace], code — [:Backspace]
• /: key — [:/], code — [:Slash]

2-mashq (o'rta): + va - bilan porsiya

Sahifada "Porsiya: 1" yozuvi bor. + bosilsa porsiya bittaga oshsin, - bosilsa kamaysin. Porsiya 1 dan kam va 10 dan ko'p bo'lmasin. Mehmon izoh maydoniga yozayotganda bu tugmalar ishlamasin. Har o'zgarishda konsolga Porsiya: 2 chiqsin.

Ishora: key bilan tekshiring — «key va code» bo'limidagi savolni eslang. Chegara — Math.min va Math.max (Math obyekti).

<p>Osh. Porsiya: <output id="porsiya">1</output></p>
<label for="izoh">Izoh</label>
<input id="izoh">
<script>
  // shu yerga yozing
</script>

<p>Osh. Porsiya: <output id="porsiya">1</output></p>
<label for="izoh">Izoh</label>
<input id="izoh">
<script>
  const porsiya = document.getElementById("porsiya");
  let soni = 1;

  function yozyaptimi(element) {
    const maydon = "input, textarea, select, [contenteditable]";
    return element.closest(maydon) !== null;
  }

  document.addEventListener("keydown", (event) => {
    if (yozyaptimi(event.target)) {
      return;
    }
    if (event.key === "+") {
      soni = Math.min(10, soni + 1);
    } else if (event.key === "-") {
      soni = Math.max(1, soni - 1);
    } else {
      return;
    }
    porsiya.textContent = soni;
    console.log(`Porsiya: ${soni}`);
  });
</script>

3-mashq (qiyin): Ctrl+Enter bilan izoh yuborish

Izoh maydonida (textarea) oddiy Enter yangi qatorga o'tsin. Ctrl+Enter (Mac'da Cmd+Enter) esa izohni "yuborsin": konsolga Yuborildi: <matn> chiqsin va maydon tozalansin. Bo'sh izoh yuborilmasin. Bosib turilgan tugma bir necha marta yubormasin, IME paytida ham yubormasin.

Ishora: textarea qiymati — value, bo'sh joylarni olib tashlash — trim() (Matnni tozalash). Bu yerda tinglovchi textarea ning o'zida — yozyaptimi kerak emas.

<label for="izoh">Izoh (Ctrl+Enter — yuborish)</label>
<textarea id="izoh" rows="3"
          aria-keyshortcuts="Control+Enter"></textarea>
<script>
  const izoh = document.getElementById("izoh");
  izoh.addEventListener("keydown", (event) => {
    const ctrl = event.ctrlKey || event.metaKey;
    if (!ctrl || event.key !== "Enter") {
      return;
    }
    if (event.repeat || event.isComposing) {
      return;
    }
    event.preventDefault();
    const matn = izoh.value.trim();
    if (matn === "") {
      return;
    }
    console.log(`Yuborildi: ${matn}`);
    izoh.value = "";
  });
</script>

4-mashq: Portfolio qadami — Escape ni tekshiring va buzmang

«Nega bu kerak?» bo'limida aytdik: Escape ni brauzer <dialog> va popover'da o'zi qiladi. Portfolio menyusi esa popover (Navbar va mobil menyu). Demak, Escape u yerda allaqachon ishlaydi — bu safar yangi kod yozmaysiz. Vazifangiz — buni o'z ko'zingiz bilan isbotlash va kelajakda tasodifan buzib qo'ymaslik.

1. Telefon o'lchamida (Ctrl+Shift+M) portfolio'ni oching va DevTools konsoliga ikki qator yozing (pastdagi yechimda tayyor). Ular klaviatura hodisalarini va menyuning toggle hodisasini kuzatadi. toggle — popover ochilganda va yopilganda keladigan hodisa (<dialog> va Popover API JS'dan darsida batafsil).
2. "Menyu" ni bosing, Tab bilan havolaga o'ting va Escape ni bosing. Konsoldagi tartibni yozib oling. Fokus qayerda qoldi?
3. Pastdagi oynada tajriba qiling: «Hamma tugmada preventDefault» xatosi popover'ga nima qiladi?

<button type="button" popovertarget="asosiy-menyu">Menyu</button>
<nav id="asosiy-menyu" aria-label="Asosiy menyu" popover>
  <a href="#">Bosh sahifa</a> <a href="#">Loyihalar</a>
</nav>
<script>
  const menyu = document.getElementById("asosiy-menyu");
  menyu.addEventListener("toggle", (event) => {
    console.log(`toggle: ${event.newState}`);
  });
  document.addEventListener("keydown", (event) => {
    console.log(`keydown: ${event.key}`);
    // event.preventDefault();
  });
</script>

monitorEvents(document, "key");
document.getElementById("asosiy-menyu")
  .addEventListener("toggle", (event) => {
    console.log(event.newState);
  });

12. Real ishda

• Command palette — Ctrl+K bilan ochiladigan "buyruqlar oynasi" (GitHub, VS Code, Slack, Notion). Ichida aynan shu darsdagi tekshiruvlar: code, ctrlKey || metaKey, preventDefault.
• Kutubxonalar — tinykeys, hotkeys-js kabi kichik kutubxonalar "$mod+KeyK" ko'rinishidagi yozuvni qabul qiladi ($mod — Windows'da Ctrl, Mac'da Cmd). Kursda alohida o'rganmaymiz; ular ichida ham key/code farqi hal qilingan.
• O'yinlar va chizish dasturlari — code (WASD) va repeat.
• Formalar — Enter bilan yuborish brauzerning o'zida bor. JavaScript faqat qo'shimchalar uchun: Ctrl+Enter, Escape bilan bekor qilish.
• Intervyuda: "key va code farqi?", "Nega keyCode ishlatilmaydi?", "Tezkor tugma maydonga yozishga xalaqit bermasligini qanday ta'minlaysiz?"

Xulosa

• keydown / keyup fokusdagi elementga keladi (fokus bo'lmasa — body) va bubble qiladi; keypress, keyCode — eskirgan.
• key — belgi ("a", "A", "?", "Escape", bo'sh joy — " "), code — jismoniy joy (KeyA, Slash, Space).
• Belgi va nomli tugmalar — key; Ctrl + harf va o'yinlar — code; ctrlKey || metaKey — Windows va Mac uchun.
• repeat — bosib turilgan tugma; isComposing — IME; yozilgan matn uchun input hodisasi.
• Tugmada Enter/bo'sh joy click beradi (detail: 0) — <button> uchun keydown shart emas.
• Tezkor tugma: maydonga yozayotganda ishlamaydi, preventDefault faqat o'z tugmasiga, ko'rinadigan va aria-keyshortcuts bilan.

Keyingi dars: Fokus, scroll va resize hodisalari — fokus qayerga ketganini kuzatish, sahifa aylantirilganda va oyna o'lchami o'zgarganda javob berish.

Manbalar

• MDN: "KeyboardEvent: key property", "KeyboardEvent: code property", "KeyboardEvent: isComposing property" — developer.mozilla.org
• MDN: "Element: keydown event", "aria-keyshortcuts" — developer.mozilla.org
• W3C: "UI Events KeyboardEvent code Values", "UI Events KeyboardEvent key Values" — w3.org
• W3C WCAG 2.2: "Understanding SC 2.1.4: Character Key Shortcuts" — w3.org/WAI