Sledování modifikačních kláves v JavaScriptu

Pomocí objektu Event lze zjistit, zda byly v okamžiku události stisknuty klávesy Ctrl, Alt a Shift. To se provádí pomocí vlastností ctrlKey, altKey a shiftKey - mají hodnotu true nebo false v závislosti na tom, zda byla tato klávesa v okamžiku události stisknuta nebo ne.

Podívejme se na příklad. Předpokládejme, že máme následující tlačítko:

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

Při kliknutí na tlačítko vypíšeme zprávu o tom, zda byla stisknuta jedna z kláves Ctrl, Alt a Shift:

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

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

Je dán prvek. Zařiďte, aby se po kliknutí na něj obarvil na červeno, ale pouze pokud je v okamžiku kliknutí stisknuta klávesa Alt.

Předpokládejme, že máte seznam ul s prvky li:

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

Zařiďte, aby po kliknutí na jakýkoli prvek li byl na konec jeho textu přidán znak 1, pokud je stisknuta klávesa Ctrl, a znak 2, pokud je stisknuta klávesa Shift.