Seguimiento de teclas modificadoras en JavaScript

Usando el objeto Event podemos saber si las teclas Ctrl, Alt y Shift estaban presionadas en el momento del evento. Esto se hace usando las propiedades ctrlKey, altKey y shiftKey - tienen un valor de true o false dependiendo de si esa tecla estaba presionada en el momento del evento o no.

Veamos un ejemplo. Supongamos que tenemos el siguiente botón:

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

Al hacer clic en el botón, mostraremos un mensaje indicando si una de las teclas Ctrl, Alt y Shift estaba presionada:

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

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

Dado un elemento. Haz que al hacer clic en él, se coloree de rojo, pero solo si en el momento del clic está presionada la tecla Alt.

Supongamos que tienes una lista ul con etiquetas li:

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

Haz que al hacer clic en cualquier li, al final de su texto se agregue el número 1 si está presionada la tecla Ctrl, y el número 2 si está presionada la tecla Shift.