Evenimente Tastatură
Un alt tip comun de evenimente sunt evenimentele tastaturii.
- keydown: apare când este apăsată o tastă a tastaturii și durează atâta timp cât este apăsată tasta
- keyup: apare când este eliberată o tastă a tastaturii
- keypress: apare la apăsarea unei taste a tastaturii, dar după evenimentul keydown și înainte de keyup. Trebuie să se țină cont că acest eveniment este generat doar pentru acele taste care produc un caracter, de exemplu, la scrierea de caractere. Apăsările pe alte taste, de exemplu, pe Alt, nu sunt luate în considerare.
Pentru lucrul cu evenimentele tastaturii este definit obiectul KeyboardEvent, care adaugă o serie de proprietăți specifice tastaturii la proprietățile obiectului Event:
- altKey: returnează true dacă a fost apăsată tasta Alt în timpul generării evenimentului
- key: returnează simbolul tastei apăsate, de exemplu, la apăsarea tastei "T" această proprietate va conține "T". Iar dacă este apăsată tasta "Z", atunci această proprietate va conține "Z"
- code: returnează reprezentarea ca șir de caractere a tastei fizice apăsate a tastaturii QWERTY, de exemplu, la apăsarea tastei "T" această proprietate va conține "KeyT", iar la apăsarea tastei ";" (punct și virgulă), proprietatea va returna "Semicolon".
Când se folosește această proprietate, trebuie luate în considerare câteva aspecte. În primul rând, se folosește tastatura QWERTY.
Adică, dacă schimbăm configurația tastaturii, de exemplu, la una în limba rusă și apăsăm pe tasta "Я", valoarea va fi "KeyZ" - pe tastatura QWERTY, tasta Z reprezintă aceeași tastă ca și "Я" în configurația în limba rusă.
Un alt aspect - se ia în considerare chiar tastatura fizică. Dacă este apăsată o tastă pe o tastatură virtuală, valoarea returnată va fi stabilită de browser în funcție de ce tastă de pe tastatura fizică corespunde apăsării.
- ctrlKey: returnează true dacă a fost apăsată tasta Ctrl în timpul generării evenimentului
- metaKey: returnează true dacă a fost apăsată o metatastă a tastaturii în timpul generării evenimentului
- shiftKey: returnează true dacă a fost apăsată tasta Shift în timpul generării evenimentului
De exemplu, putem folosi tastele de pe tastatură pentru a muta un element pe o pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
const blueRect = document.getElementById("blueRect");
// obținem stilul pentru blueRect
const blueRectStyle = window.get
ComputedStyle(blueRect);
// stabilim handler-ul pentru apăsarea tastei
window.addEventListener("keydown", moveRect);
function moveRect(e){
const left = parseInt(blueRectStyle.marginLeft); //deplasarea față de marginea stângă
const top = parseInt(blueRectStyle.marginTop); // deplasarea față de marginea superioară
switch(e.key){
case "ArrowLeft": // dacă este apăsată tasta stânga
if(left > 0)
blueRect.style.marginLeft = left - 10 + "px";
break;
case "ArrowUp": // dacă este apăsată tasta sus
if(top > 0)
blueRect.style.marginTop = top - 10 + "px";
break;
case "ArrowRight": // dacă este apăsată tasta dreapta
if(left < document.documentElement.clientWidth - 100)
blueRect.style.marginLeft = left + 10 + "px";
break;
case "ArrowDown": // dacă este apăsată tasta jos
if(top < document.documentElement.clientHeight - 100)
blueRect.style.marginTop = top + 10 + "px";
break;
}
}
</script>
</body>
</html>În acest caz, se procesează evenimentul keydown, în handler-ul căruia controlăm proprietățile de stil ale elementului blueRect. Deoarece la atașarea handler-ului stilul elementului poate să nu fie setat, îl calculăm explicit folosind metoda window.getComputedStyle():
const blueRectStyle = window.getComputedStyle(blueRect);În handler-ul evenimentului, selectăm valorile proprietăților marginLeft și marginTop din acest stil:
const left = parseInt(blueRectStyle.marginLeft); //deplasarea față de marginea stângă
const top = parseInt(blueRectStyle.marginTop); // deplasarea față de marginea superioarăApoi, folosind proprietatea e.key, obținem tasta apăsată. Lista codurilor tastelor poate fi găsită pe pagina https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values.
Ne interesează patru taste: sus, jos, stânga, dreapta. Acestea corespund denumirilor "ArrowUp", "ArrowDown", "ArrowLeft" și "ArrowRight". Dacă una dintre ele este apăsată, efectuăm acțiunile: mărirea sau micșorarea spațiului elementului față de marginea superioară sau stângă.
Pentru a preveni ca elementul să iasă din limitele ferestrei, verificăm valorile maxime folosind document.documentElement.clientWidth (lățimea elementului rădăcină) și document.documentElement.clientHeight (înălțimea elementului rădăcină).
Merită de menționat că acest cod nu este foarte optim, deoarece pentru a verifica valorile trebuie să calculăm poziția elementului blueRect pe orizontală și verticală.
În plus, la fiecare apel al handler-ului, trebuie să verificăm marginea dreaptă (document.documentElement.clientWidth - 100) și marginea inferioară (document.documentElement.clientHeight - 100) a documentului, pentru a preveni ca blueRect să iasă din spațiul vizibil.
În acest caz, putem adăuga abstracții suplimentare sub forma coordonatelor curente ale blueRect și poziției marginilor drepte și inferioare ale zonei vizibile. Modificăm codul JavaScript în modul următor:
const blueRect = document.getElementById("blueRect");
const position = [20, 20]; // poziția blueRect
// mutăm blueRect la poziția din position
function setPosition() {
blueRect.style.marginLeft = position[0] + "px";
blueRect.style.marginTop = position[1] + "px";
}
function init(){
const rightLimit = document.documentElement.clientWidth - 100; // marginea dreaptă
const bottomLimit = document.documentElement.clientHeight - 100; // marginea inferioară
setPosition(); // setăm poziția inițială pentru blueRect
function moveRect(e){
switch(e.key){
case "ArrowLeft": //
dacă este apăsată tasta stânga
if(position[0] > 0)
position[0] = position[0] - 10;
break;
case "ArrowUp": // dacă este apăsată tasta sus
if(position[1] > 0)
position[1] = position[1] - 10;
break;
case "ArrowRight": // dacă este apăsată tasta dreapta
if(position[0] < rightLimit)
position[0] = position[0] + 10;
break;
case "ArrowDown": // dacă este apăsată tasta jos
if(position[1] < bottomLimit)
position[1] = position[1] + 10;
break;
}
setPosition();
}
window.addEventListener("keydown", moveRect);
}
// La încărcarea paginii, executăm funcția init
window.addEventListener("load", init);Acum coordonatele blueRect sunt stocate în array-ul position, unde prima valoare este distanța de la stânga, iar a doua valoare este distanța de sus. Pentru a stabili poziția reală a blueRect pe pagină, este definită funcția setPosition.
const position = [20, 20]; // poziția blueRect
// mutăm blueRect la poziția din position
function setPosition() {
blueRect.style.marginLeft = position[0] + "px";
blueRect.style.marginTop = position[1] + "px";
}Atașăm la evenimentul de încărcare a ferestrei - load - handler-ul - funcția init:
window.addEventListener("load", init);În funcția init definim marginea dreaptă și inferioară pentru mișcarea blueRect, și setăm poziția sa inițială:
const rightLimit = document.documentElement.clientWidth - 100; // marginea dreaptă
const bottomLimit = document.documentElement.clientHeight - 100; // marginea inferioară
setPosition(); // setăm poziția inițială pentru blueRectApoi, definim handler-ul moveRect, în care modificăm valorile din array-ul position:
function moveRect(e){
switch(e.key){
case "ArrowLeft": // dacă este apăsată tasta stânga
if(position[0] > 0)
position[0] = position[0] - 10;
break;
//............
}
setPosition();
}Și după toate modificările, resetăm poziția cu funcția setPosition.
În final, atașăm handler-ul la evenimentul de apăsare a unei taste a tastaturii:
window.addEventListener("keydown", moveRect);