Javascript：使用箭头键提交表单

Question

我在一个页面上有四个表单，我希望根据按下的箭头键提交其中的任何一个。

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