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:

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

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

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.

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

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