Javascript: Soumettre le formulaire avec les touches fléchées

Question

J'ai quatre formulaires sur une page, et je veux que l'un d'entre eux soumis en fonction de la touche fléchée est enfoncé.

<form name='go_north' action='' method='post'> 
<input type='hidden' name='direction' value='north' /> 
</form> 

<form name='go_east' action='' method='post'> 
<input type='hidden' name='direction' value='east' /> 
</form> 

etc... 

Je peux voir comment le faire avec des entrées de texte si elles ont le focus, mais je ne peux pas comprendre comment le faire avec des entrées cachées. En outre, il suffit de travailler dans Chrome. Tout avis serait grandement apprécié.

Answer 1

Ajouter un document.addEventListener("keydown", function(){}) qui va écouter les touches, puis déterminer le code clé et les mapper pour soumettre le formulaire basé sur le code clé.

Soumettre les formulaires est aussi simple que de trouver le formulaire et d'appeler .submit() dessus!

document.addEventListener("keydown", function(event) { 
 
    var code; 
 
    if (event.key !== undefined) { 
 
    code = event.key; 
 
    } else if (event.keyIdentifier !== undefined) { 
 
    code = event.keyIdentifier; 
 
    } else if (event.keyCode !== undefined) { 
 
    code = event.keyCode; 
 
    } 
 
    console.log(code); 
 
    handleArrow(code); 
 
}); 
 

 
function handleArrow(code) { 
 
    switch (code) { 
 
    case 'ArrowLeft': 
 
     submitForm('go_west'); 
 
     break; 
 
    case 'ArrowRight': 
 
     submitForm('go_east'); 
 
     break; 
 
    case 'ArrowDown': 
 
     submitForm('go_south'); 
 
     break; 
 
    case 'ArrowUp': 
 
     submitForm('go_north'); 
 
     break; 
 
    } 
 
} 
 

 
function submitForm(id) { 
 
    $("#" + id).submit(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="go_north"> 
 
    <label for="north">north</label> 
 
    <input id="north" type="text" name="north" value="north"> 
 
</form> 
 
<form id="go_east"> 
 
    <label for="east">east</label> 
 
    <input id="east" type="text" name="east" value="east"> 
 
</form> 
 
<form id="go_south"> 
 
    <label for="south">south</label> 
 
    <input id="south" type="text" name="south" value="south"> 
 
</form> 
 
<form id="go_west"> 
 
    <label for="west">west</label> 
 
    <input id="west" type="text" name="west" value="west"> 
 
</form>