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:

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

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

let 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');
	}
});

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

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

<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.