Śledzenie klawiszy modyfikatorów w JavaScript

Za pomocą obiektu Event można sprawdzić, czy w momencie zdarzenia były naciśnięte klawisze Ctrl, Alt i Shift. Robi się to za pomocą właściwości ctrlKey, altKey i shiftKey - mają one wartość true lub false w zależności od tego, czy klawisz był naciśnięty w momencie zdarzenia, czy nie.

Spójrzmy na przykład. Załóżmy, że mamy następujący przycisk:

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

Po kliknięciu przycisku będziemy wyświetlać komunikat o tym, czy został naciśnięty jeden z klawiszy Ctrl, Alt i Shift:

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

elem.addEventListener('click', function(event) {
	if (event.ctrlKey) {
		console.log('naciśnięto Ctrl');
	}
	
	if (event.altKey) {
		console.log('naciśnięto Alt');
	}
	
	if (event.shiftKey) {
		console.log('naciśnięto Shift');
	}
});

Dany jest element. Spraw, aby po kliknięciu na niego kolorował się na czerwono, ale tylko wtedy, gdy w momencie kliknięcia naciśnięty jest klawisz Alt.

Załóżmy, że masz listę ul z elementami li:

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

Spraw, aby po kliknięciu na dowolny li, na końcu jego tekstu dodawała się liczba 1, jeśli naciśnięty jest klawisz Ctrl, i liczba 2, jeśli naciśnięty jest klawisz Shift.