如何通过纯HTML实现按下回车键时调用指定函数

不需要额外编写独立的JavaScript键盘事件监听逻辑，直接利用HTML原生表单的默认行为就能实现需求。
浏览器原生遵循以下表单交互规则：当用户在表单内的输入框中按下回车键时，会自动触发对应表单的提交动作，我们只需要把目标执行逻辑绑定到表单的提交事件上，同时阻止表单默认的页面刷新行为即可。

修改后的代码如下：

<form onsubmit="newInput(); return false;">
  <input type="text" placeholder="...">
  <button type="submit">Enter</button>
</form>

代码说明 #

• 用<form>标签将原有的输入框、按钮包裹为一个表单单元
• 给form标签添加onsubmit属性：先执行目标函数newInput()，末尾的return false;用于拦截表单提交后的默认跳转/刷新行为，不会触发页面重载
• 将原按钮的type="button"修改为type="submit"，此时点击按钮、输入框内按回车两种操作都会触发同一个提交逻辑，不需要重复绑定事件
• 整个实现不需要单独编写DOM选择、键盘事件判断/绑定类的JS代码，所有交互逻辑都依托HTML原生特性和行内事件属性完成，符合无额外JS监听的要求

补充：如果后续表单内新增了其他输入控件，只要保留提交按钮的type="submit"属性，回车触发表单提交的逻辑依然正常生效，不会因为输入框数量增加失效。

内容的提问来源于stack exchange，提问作者Jack Snowdon