Javascript：矢印キーでフォームを送信

Question

ページには4つのフォームがあり、どの矢印キーが押されたかによって送信されます。

<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... 

フォーカスがある場合はテキスト入力でそれを行う方法がわかりますが、隠れた入力でどのように行うのかわかりません。また、Chromeでのみ動作する必要があります。アドバイスをいただければ幸いです。

Answer 1

document.addEventListener("keydown", function(){})を追加すると、キーの押下をリスンし、キーコードを特定し、キーコードに基づいてフォームを送信するようにマップします。

フォームを送信するだけで簡単にフォームを検索し、.submit()を呼び出すことができます。

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>