Jquery formulier keycode

Status
Niet open voor verdere reacties.
G

gast0198

Gebruiker
Lid geworden
15 nov 2016
Berichten
83
Ik heb een formulier met 2 inputvelden (naam en achternaam)

Ik zou graag wanneer ik op een pijltjestoets druk een opsomming willen zien staan van welke pijltjestoetsen ik reeds gedrukt heb. Bijvoorbeeld:
Links, rechts, onder, boven, boven, onder (de toetsen moeten bij wijze van spreken bewaard blijven) .

Gebruik het event om de keycode bij keyup op te halen:
links = 37 (keyCode)
omhoog = 38 (keyCode)
rechts = 39 (keyCode)
omlaag = 40 (keyCode)

Weet er iemand de functie hoe ik met het event de keycode bij keyup moet ophalen? Graag indien mogelijk een voorbeeld van hoe ik de functie moet ingeven.
 

Bijlagen

  • afbeelding opdracht.JPG
    afbeelding opdracht.JPG
    17,4 KB · Weergaven: 40
Laatst bewerkt:
Ik heb een voorbeeldje gemaakt voor de spatiebalk, dan kun je het aanpassen zoals je wilt.
Code: 
<form><input id="naam"></form>
<div id="result">Toets:<br></div>
<script>
var Result = document.getElementById("result");
var Naam = document.getElementById("naam");
Naam.addEventListener("keyup", WelkeToets, false);
function WelkeToets(e) {
  if (e.keyCode == 32) {
    Result.innerHTML += '<br>Spatie';
  }
}
</script>
 
Je wilt een jQuery versie zie ik :)
Code: 
<form><input id="naam"></form>
<div id="result">Toets:<br></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#naam").on("keyup", function(event) {
    if (event.which == 32) {
      $("#result").append("<br>spatie");
    }
  });
});
</script>
 
Bedankt, maar ik zit nog wat in de war zou iemand de event functie opnieuw willen maken aan de hand van mijn gegevens?

code:
<div id="Naam_Achternaam" class="forms">
<form action="/Naam_Achternaam" method="post">
<p>
<label>Naam</label>
<input type="text" name="naam" />
</p>
<p>
<label>Achternaam</label>
<input type="text" name="achternaam"/>
</p>

<p id="result"></p>

</form>
</div>
 
Het lijkt mij niet handig om met events bezig te zijn als je niet een selector kan aanpassen en een switch ertussen kan zetten. Dat is basiskennis.
Code: 
$(document).ready(function() {
  $("#Naam_Achternaam input").on("keyup", function(event) {
	switch(event.which) {
		case 37: Key="Pijl links"; break;
		case 38: Key="Pijl boven"; break;
		case 39: Key="Pijl rechts"; break;
		case 40: Key="Pijl onder"; break;
		default: return;
	}
	$("#result").append(Key + "<br>");
  });
});
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan