Klaviatura hodisalari
Klaviatura hodisalari foydalanuvchi klaviaturadagi tugmachani bosganda sodir bo‘ladi:
- keydown (tugma bosiladi)
- keyup (tugma qo‘yib yuboriladi)
- keypress (deprecated)
keypress faqat belgi tugmalari (a yoki 5) uchun ishga tushadi, boshqaruv tugmalari (alt yoki backspace) uchun emas.
Ishlab chiquvchilarga uning o‘rniga keydown yoki keyup dan foydalanish tavsiya etiladi.
keydown hodisasi
event.key’dan foydalanish
Misol
Qaysi tugma bosilganini ko‘rsatish:
<input id="k" type="text" placeholder="Press a key">
<p id="demo"></p>
<script>
const k = document.getElementById("k");
// Let k listen for keydown
k.addEventListener("keydown", function (event) {
// Then display the event.key
document.getElementById("demo").innerHTML = "You pressed: " + event.key;
});
</script>
O‘zingiz sinab ko‘ring »
Klavish xususiyatlari
KeyboardEvent obyekti voqeada qaysi kalit ishtirok etganligini aniqlash uchun foydali xususiyatlarni taqdim etadi:
| Xususiyat | Tavsif | Z bosilganda |
|---|---|---|
| event.key | Kalit qiymatini qaytaradi. Til sozlamalariga qarab farq qilishi mumkin. | z qaytaradi (shift bosib turilgan bo‘lsa, Z) |
| event.code | Kalit kodini qaytaradi. Til sozlamalaridan qat’iy nazar, doimiy. | Har doim "KeyZ" qaytaradi |
Tugmalar kombinatsiyalarini (masalan, Ctrl + S) amalga oshirish uchun event.ctrlKey, event.shiftKey, event.altKey va event.metaKey kabi xususiyatlar yordamida modifikator tugmalarni ham aniqlashingiz mumkin.
Enter tugmasini aniqlash
event.code’dan foydalanish
<input id="in01" type="text" placeholder="Press Enter">
<p id="demo"></p>
<script>
const in01 = document.getElementById("in01");
// Let in01 listen for keydown
in01.addEventListener("keydown", function (event) {
// If event.code was "enter", then display text
if (event.code === "Enter") {
document.getElementById("demo").innerHTML = "Enter was pressed!";
}
});
</script>
O‘zingiz sinab ko‘ring »
Xulosa
JavaScript foydalanuvchining klaviaturadan kiritgan ma’lumotlarini aniqlash va boshqarish uchun klaviatura hodisalarini taqdim etadi, bu esa shaklni tekshirish, o‘yinni boshqarish va klaviatura yorliqlari kabi interaktiv veb-tajribalarni ta’minlaydi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!