Modifikátor billentyűk nyomon követése JavaScriptben

Az Event objektum segítségével megtudhatjuk, hogy az esemény pillanatában lenyomták-e a Ctrl, Alt és Shift billentyűket. Ez a ctrlKey, altKey és shiftKey tulajdonságokkal tehető meg - ezek true vagy false értékkel rendelkeznek attól függően, hogy az esemény pillanatában lenyomva volt-e a billentyű vagy sem.

Nézzünk egy példát. Tegyük fel, hogy a következő gombunk van:

html<button id="elem">text</button>

A gombra kattintva kiírunk egy üzenetet arról, hogy a Ctrl, Alt és Shift billentyűk közül melyik volt lenyomva:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('Ctrl lenyomva');
  }
  
  if (event.altKey) {
    console.log('Alt lenyomva');
  }
  
  if (event.shiftKey) {
    console.log('Shift lenyomva');
  }
});

Задание 1

Adott egy elem. Állítsa be úgy, hogy rákattintáskor pirosra színeződjön, de csak akkor, ha a kattintás pillanatában a Alt billentyű le van nyomva.

Задание 2

Tegyük fel, hogy van egy ul listája li tag-ekkel:

html<ul id="elem">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Állítsa be úgy, hogy bármelyik li-re kattintáskor a szöveg végéhez hozzáadódjon a 1 szám, ha a Ctrl billentyű le van nyomva, és a 2 szám, ha a Shift billentyű le van nyomva.