Actief Topic: [JS] Toetsenbord events

In deze mini tutorial vertel ik hoe je in javascript gebruikers iets kan laten doen met het toetsenbord. In javascript kan je events opvangen. Events zijn gebeurtenissen zoals een muisklik of een toets dat ingedrukt wordt, etc. Aan elke event zit weer informatie gekoppelt. De event die wij nu gaan opvangen is de 'onkeydown' event. Dus als men een toets van het toestenbord naar beneden duwt. Om nu erachter te komen welke toest men heeft ingeduwt gaan we kijken naar de keycode. Dit is informatie die dus mede wordt doorgegeven met de event. Elke toets heeft zo zijn eigen code. [code=javascript]// We sturen de onkeydown events door naar de functie checkKeycode document.onkeydown = checkKeycode // De functie checkKeycode krijgt een variabele mee, de informatie over de event. function checkKeycode(e) { // We declareren even een lege variabele var keycode; // Kijken of we de keycode kunnen opvragen (in elke browser werkt het weer anders) if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; // Keycode alerten alert(keycode); return false; }[/code] De return false in de functie zorgt ervoor dat de browser niks meer doet met de betreffende toets. Druk je bijvoorbeeld op F1, dan wordt normaal een hulpvenster van de browser geopend. Door de return false wordt dat dus voorkomen. Met bovenstaande functie kan je meteen de keycode opzoeken van een bepaalde toets. Als je nu een alert wil wanneer men op enter druk kan je dus dit gebruiken: [code=javascript]// We sturen de onkeydown events door naar de functie checkKeycode document.onkeydown = checkKeycode // De functie checkKeycode krijgt een variabele mee, de informatie over de event. function checkKeycode(e) { // We declareren even een lege variabele var keycode; // Kijken of we de keycode kunnen opvragen (in elke browser werkt het weer anders) if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; // Als de keycode 13 is, alert if(keycode == 13) { alert("Je hebt de enter toets ingedrukt"); } return false; }[/code] Willen we nu meer keycodes gebruiken dan kunnen we het beste een switch gebruiken. [code=javascript]// We sturen de onkeydown events door naar de functie checkKeycode document.onkeydown = checkKeycode // De functie checkKeycode krijgt een variabele mee, de informatie over de event. function checkKeycode(e) { // We declareren even een lege variabele var keycode; // Kijken of we de keycode kunnen opvragen (in elke browser werkt het weer anders) if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; switch(keycode) { case 32: alert("Auw! Niet zo hard slaan op de spatiebalk! Dat doet pijn :("); break; case 13: alert("Je hebt de enter toets ingedrukt"); break; default: alert(keycode); break; } return false; }[/code]

handige tutorial, die ga ik zeker nog wel een keertje gebruiken (voor een één of ander ideetje dat ooit een keer in me opgekomen is:P) ik heb wel nog 2 toevoegingen: 1) misschien wel handig om een lijst te geven met alle keycode's en bijbehorende toets. Waarschijnlijk is dit heel makkelijk op te zoeken op internet, maar toch.. het hoort er eigenlijk wel bij vind ik, of in elk geval een link. (ja, ik ben lui, ik weet het:P:P) [b]EDIT:[/b] ik zie dat er ook een mogelijkheid bestaat om door middel van uitproberen zelf het lijstje samen te stellen, maat daar ben ik eigenlijk nog steeds te lui voor (neehoor, ik doe het wel:P) 2) voor de beginners onder ons die niet bekent zijn met de switch-functie is het misschien handig om er op te attenderen als je in je laatste voorbeeld heel veel toetsen wil controleren, dat je die kan switchen. het scheelt ruimte/typewerk en het wordt overzichtelijker/makkelijker Maar voor de rest een prima tut

Puntje 1 heb je al ge-edit. Puntje 2 heb ik erin verwerkt. Bedankt voor de reactie [[party]]