자바 스크립트 : 화살표 키가있는 양식 제출

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>