为什么按 Enter 键不能提交表单？

Code°希玲提问于 2026-03-19 09:57:20 阅读 21

交互

我在一个带输入框的弹窗里加了表单，但按 Enter 键完全没反应，明明 input 在 form 里面啊。<form onsubmit="handleSubmit"> 这样写的，是不是少了什么？

试过给 input 加 type="submit" 的按钮，但设计稿里没有这个按钮，只能靠 Enter 触发。现在卡在这儿了，求指点！

<form onsubmit="handleSubmit(event)">
  <input type="text" placeholder="请输入内容" />
</form>

Enter提交键盘交互

我来解答赞 5 收藏

反馈

1 条解答

若溪~ Lv1

表单里只有一个 input 时，按 Enter 本身就不会触发提交，这是浏览器的默认行为。

两种解决办法：

1. 加个隐藏的 submit 按钮：

2. 或者监听 Enter 键手动提交：

document.querySelector('input').addEventListener('keydown', function(e) {

  if (e.key === 'Enter') {

    this.form.requestSubmit();

  }

});

第二种不用改 HTML 结构，更干净。

2026-03-19 10:01