javascript - 将 Enter 键映射到 HTML/CSS/JS 中的按钮

Question

我有一个小表格，您必须在其中提交分数，这是一个数字，然后我有一个处理该数字的脚本。

形式如下:

<form  name ="input2" style="margin-left: 30%; margin-right: 30%; margin-bottom:5%">
  Score:
  <input type="text" id="score" name="score" maxlength="3" onkeydown="if(event.keyCode==13) changePlayer();" patern="\d"><br>
  <input id = "submit" type="button" value="Submit" name="Submit" class="btn btn-primary" onclick="changePlayer(); return false"/>
  <input type="button" name="Cancel" class="btn btn-primary" value="Cancel"/>
</form>

我在文本框中输入数字，然后当我单击提交按钮时，该函数会处理该数字。问题是，我希望当我按 Enter 时发生同样的事情，但相反，页面刷新，整个事情重新开始，我丢失了数据。

如何将回车键映射到按钮或功能，而不刷新页面？

Answer 1

只需替换 <input id = "submit" type="button"至<input id = "submit" type="submit" 。您不需要支票。

function changePlayer(score) {
  alert(input2.score.value);
}

<form name="input2" style="margin-left: 30%; margin-right: 30%; margin-bottom:5%" onsubmit="changePlayer();return false;">
  Score:
  <input type="text" id="score" name="score" maxlength="3" patern="\d"><br>
  <input id = "submit" type="submit" value="Submit" name="Submit" class="btn btn-primary" onclick="changePlayer(); return false"/>
  <input type="button" name="Cancel" class="btn btn-primary" value="Cancel"/>
</form>