Spårning av modifieringstangenter i JavaScript

Med hjälp av objektet Event kan man ta reda på om tangenterna Ctrl, Alt och Shift var nedtryckta när händelsen inträffade. Detta görs med hjälp av egenskaperna ctrlKey, altKey och shiftKey - de har värdet true eller false beroende på om tangenten var nedtryckt vid händelsetillfället eller inte.

Låt oss titta på ett exempel. Låt oss säga att vi har följande knapp:

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

Vid klick på knappen kommer vi att skriva ut ett meddelande om huruvida en av tangenterna Ctrl, Alt och Shift var nedtryckt:

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

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

Givet ett element. Gör så att när man klickar på det får det röd färg, men endast om Alt-tangenten är nedtryckt vid klickögonblicket.

Låt oss säga att du har en lista ul med taggar li:

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

Gör så att när man klickar på någon li läggs siffran 1 till i slutet av dess text om Ctrl-tangenten är nedtryckt, och siffran 2 om Shift-tangenten är nedtryckt.