Functie die teruggeeft welke toets werd ingedrukt

Door Onbekende gebruiker op 30-08-2022 11:14

2.934 views

Op mijn website - geschreven in PHP - is onder meer een fotogalerij.
Door op knoppen te klikken kan er vooruit en achteruit gebladerd worden.
Maar met de cursortoetsen zal dat ook kunnen.
Dus ik ben op zoek naar een functie die teruggeeft welke toets werd ingedrukt.
Ongeveer zo:

function key()
   { ???????? }

if (key=="ArrowLeft") {......};
if (key=="ArrowRight") {......};

Kan iemand mij vertellen wat er bij de vraagtekens moet staan?
Ik weet dan zelf hoe ik de puntjes moet vervangen.

A Adoptive Solution

30-08-2022 11:22

Gevonden:
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Zo pas ik het toe om door paginas te bladeren of naar een bepaalde pagina te gaan.

 <?php
$picRecipe = ( isset($picRecipe) ? ( $picRecipe == 1 ? 1 : 0 ) : 0 );
$isRecipe = ( isset($isRecipe) ? ( $isRecipe == 1 ? 1 : 0 ) : 0 );
$thePid = ( isset($thePid) ? ( $thePid == 1 ? 1 : $thePid ) : 1 );
?>
<script>
// http://www.cambiaresearch.com/articles/15/javascript-key-codes

if (document.addEventListener)
{
	document.addEventListener("keydown",checkKey);
} else if (document.attachEvent) {
	document.attachEvent("onkeydown", checkKey);
}

function checkKey(e)
{
	e = e || window.event;

	if (e.keyCode == '27')
	{
		// Escape
		<?php if ( $picRecipe == 1 )
		{ ?>
			window.location.href = '/recipes/?pid=<?php echo $thePid; ?>';
		<?php } else if ( $isRecipe == 1 ) { ?>
			window.location.href = '/store/?pid=<?php echo $thePid; ?>';
		<?php } ?>

	} else if (e.keyCode == '37') {
		// left arrow
		<?php if ( !$isTheFirst )
		{ ?>
			window.location.href = '?prev=<?php echo $thePid; ?>';
		<?php } ?>

	} else if (e.keyCode == '38') {
		// up arrow
		<?php if ( !$isTheFirst )
		{ ?>
			window.location.href = '?pid=1';
		<?php } ?>

	} else if (e.keyCode == '39') {
		// right arrow
		<?php if ( !$isTheLast )
		{ ?>
			window.location.href = '?next=<?php echo $thePid; ?>';
		<?php } ?>
	}

	else if (e.keyCode == '40') {
		// down arrow
		<?php if ( !$isTheLast )
		{ ?>
			window.location.href = "?pid=999999";
		<?php } ?>
	}

}
</script>

Ivo P

30-08-2022 12:56

merk op dat je het dan echt over de key hebt en niet over het plaatje of teken dat erop staat. De "arrow left" kan dus meermaals op de toetsenbord zitten en dus ook meerdere nummers hebben.

Het is ook nog mogelijk om (via een omweggetje) te onderscheiden of de linker- of rechtershiftkey gebruikt wordt.

Jan Koehoorn

31-08-2022 15:07

Ik ben niet zo heel gek op switch statements, maar deze leent zich er wel heel erg voor, ipv al die else-if's.

? Onbekende gebruiker

28-09-2022 15:34

Het heeft even geduurd om mijn website aan te passen aan het voorbeeld van Adoptive Solution. Dus pas nu mijn oprechte dank - en tegelijkertijd een vraag: hoe komt het dat Escape in Chrome en Internet Explorer altijd werkt, maar in Firefox en Edge alleen als ik ook op Shift druk?

Jan Koehoorn

29-09-2022 20:14

e.keyCode is "deprecated", zoals dat heet. Ik zou het zo doen:


let key = event.key || event.keyCode;

? Onbekende gebruiker

02-10-2022 12:12

Zoals aanbevolen heb ik de code "gemoderniseerd" en nu werkt het met alle browsers. Hartelijk dank voor de tip.

Reageren

Inloggen om te reageren