Monitorizarea tastelor modificatoare în JavaScript

Cu ajutorul obiectului Event se poate afla, dacă la momentul evenimentului au fost apăsate tastele Ctrl, Alt și Shift. Acest lucru se face cu ajutorul proprietăților ctrlKey, altKey și shiftKey - ele au valoarea true sau false în funcție de dacă această tastă a fost apăsată la momentul evenimentului sau nu.

Să privim un exemplu. Să presupunem că avem următorul buton:

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

La click pe buton, vom afișa un mesaj despre dacă a fost apăsată una dintre tastele Ctrl, Alt și Shift:

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

elem.addEventListener('click', function(event) {
	if (event.ctrlKey) {
		console.log('a fost apăsat Ctrl');
	}
	
	if (event.altKey) {
		console.log('a fost apăsat Alt');
	}
	
	if (event.shiftKey) {
		console.log('a fost apăsat Shift');
	}
});

Este dat un element. Faceți astfel încât la click pe el să se coloreze în roșu, dar numai dacă în momentul click-ului este apăsată tasta Alt.

Să presupunem că aveți o listă ul cu tag-uri li:

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

Faceți astfel încât la click pe orice li, la sfârșitul textului său să se adauge numărul 1, dacă este apăsată tasta Ctrl, și numărul 2, dacă este apăsată tasta Shift.