Näppäimistön modifiointinäppäinten seuranta JavaScriptissä

Event-olion avulla voidaan selvittää, olivatko Ctrl, Alt ja Shift -näppäimet painettuna tapahtuman hetkellä. Tämä tehdään ominaisuuksien ctrlKey, altKey ja shiftKey avulla - niiden arvo on true tai false riippuen siitä, oliko ko. näppäin painettuna tapahtuman hetkellä vai ei.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava painike:

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

Painikkeen klikkauksen yhteydessä tulostamme viestin siitä, oliko yksi näppäimistä Ctrl, Alt ja Shift painettuna:

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

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

Задание 1

Annettu elementti. Tee niin, että klikattaessa sitä se värjäytyy punaiseksi, mutta vain jos Alt -näppäin on painettuna klikkauksen hetkellä.

Задание 2

Oletetaan, että sinulla on ul -lista li -tageilla:

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

Tee niin, että minkä tahansa li:n klikkauksen yhteydessä, sen tekstin loppuun lisätään numero 1, jos Ctrl -näppäin on painettuna, ja numero 2, jos Shift -näppäin on painettuna.