Skip to content

JavaScript klaviatura hodisalari

Klaviatura hodisalari foydalanuvchi klaviaturadagi tugmani bosganda sodir bo'ladi:

  • keydown (tugma bosilganda)
  • keyup (tugma qo'yib yuborilganda)
  • keypress (eskirgan)

Eslatma

keypress faqat belgili tugmalar (masalan, 'a' yoki '5') uchun ishlaydi, boshqaruv tugmalari (masalan, 'Alt' yoki 'Backspace') uchun ishlamaydi. Dasturchilarga buning o'rniga keydown yoki keyup dan foydalanish tavsiya etiladi.


keydown hodisasi

event.key dan foydalanish

Qaysi tugma bosilganligini ko'rsatuvchi misol:

html
<input id="k" type="text" placeholder="Tugmani bosing" />
<p id="demo"></p>

<script>
  const k = document.getElementById('k')

  // k uchun keydown hodisasini tinglash
  k.addEventListener('keydown', function (event) {
    // Keyin event.key ni ko'rsatish
    document.getElementById('demo').innerHTML = 'Siz bosgan tugma: ' + event.key
  })
</script>

Tugma xususiyatlari (Key Properties)

KeyboardEvent obyekti hodisada qaysi tugma ishtirok etganini aniqlash uchun foydali xususiyatlarni taqdim etadi:

XususiyatTavsif"Z" tugmasi bosilganda
event.keyTugma qiymatini qaytaradi. Til sozlamalariga qarab o'zgarishi mumkin.z (yoki Z agar Shift bosilgan bo'lsa) qaytaradi
event.codeTugma kodini qaytaradi. Til sozlamalaridan qat'i nazar o'zgarmasdir.Har doim KeyZ qaytaradi

Eslatma

Siz shuningdek event.ctrlKey, event.shiftKey, event.altKey va event.metaKey kabi xususiyatlar yordamida o'zgartiruvchi tugmalarni (modifier keys) aniqlashingiz va tugmalar kombinatsiyasini (masalan, Ctrl + S) amalga oshirishingiz mumkin.


Enter tugmasini aniqlash

event.code dan foydalanish

html
<input id="in01" type="text" placeholder="Enter tugmasini bosing" />
<p id="demo"></p>

<script>
  const in01 = document.getElementById('in01')

  in01.addEventListener('keydown', function (event) {
    // Agar event.code "Enter" bo'lsa, matnni ko'rsatish
    if (event.code === 'Enter') {
      document.getElementById('demo').innerHTML = 'Enter bosildi!'
    }
  })
</script>

Xulosa

JavaScript klaviaturadan kiritilgan ma'lumotlarni aniqlash va boshqarish uchun klaviatura hodisalarini taqdim etadi. Bu formani tekshirish, o'yin boshqaruvi va klaviatura yordamchi tugmalari (shortcuts) kabi interaktiv veb-tajribalarni yaratishga imkon beradi.