【不止前端】Form表单 回车(Enter)提交表单问题

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单

Form表单 回车(Enter)提交表单问题

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单

在Form表单中input会自动响应回车事件。这是表单的默认提交动作。

表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。

而点击Enter键会触发form表单提交。这被称为隐式提交，

  • 当用户在一个表单的input标签按enter按钮时，浏览器会找到表单中的第一个提交按钮(submit button)，并触发click，同时提交表单。
  • 如果一个表单里没有任何submit button。当这个表单只有一个input元素时，在这个input标签按enter键会隐式触发表单提交，
  • 表单有多个input标签时就不会触发。

阻止默认行为

  1. 如果要阻止回车键提交表单，可以在form标签内添加如下代码
1
<form class="form-horizontal" id="myForm" novalidate onkeydown="if(event.keyCode==13){return false;}"
  1. 再增加一个input输入框，并设置display:none

Element UI

针对el-form组件，如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。