Παρακολούθηση Πλήκτρων Τροποποίησης σε JavaScript

Με τη βοήθεια του αντικειμένου Event μπορούμε να μάθουμε αν τα πλήκτρα Ctrl, Alt και Shift είχαν πατηθεί τη στιγμή του συμβάντος. Αυτό γίνεται με τη βοήθεια των ιδιοτήτων ctrlKey, altKey και shiftKey - έχουν τιμή true ή false ανάλογα με το αν είχε πατηθεί το αντίστοιχο πλήκτρο τη στιγμή του συμβάντος ή όχι.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε το παρακάτω κουμπί:

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

Στο κλικ στο κουμπί θα εμφανίζουμε ένα μήνυμα σχετικά με το αν είχε πατηθεί ένα από τα πλήκτρα Ctrl, Alt και Shift:

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

elem.addEventListener('click', function(event) {
	if (event.ctrlKey) {
		console.log('πατήθηκε Ctrl');
	}
	
	if (event.altKey) {
		console.log('πατήθηκε Alt');
	}
	
	if (event.shiftKey) {
		console.log('πατήθηκε Shift');
	}
});

Δίνεται ένα στοιχείο. Κάντε το έτσι ώστε με κλικ πάνω του να χρωματίζεται κόκκινο, αλλά μόνο αν τη στιγμή του κλικ είναι πατημένο το πλήκτρο Alt.

Ας υποθέσουμε ότι έχετε μια λίστα ul με ετικέτες li:

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

Κάντε το έτσι ώστε με κλικ σε οποιοδήποτε li, στο τέλος του κειμένου της να προστίθεται ο αριθμός 1, αν είναι πατημένο το πλήκτρο Ctrl, και ο αριθμός 2, αν είναι πατημένο το πλήκτρο Shift.