将回车键映射到 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>

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

如何在不刷新页面的情况下将回车键映射到按钮或功能？

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>

将回车键映射到 HTML/CSS/JS 中的按钮

Mapping the enter key to a button in HTML/CSS/JS

html

javascript

css

enter

button