【3分钟学会】一招禁用表单中input输入框回车键自动触发提交事件！

昂报给

知其然知其所以然

在前端项目开发中，偶尔会有表单提交的问题：
用户输入表单后，不小心按了回车键，导致提前触发了提交事件？
问题概述

当表单中仅有一个input输入框时，按下回车键就会自动触发提交事件，这是为什么呢？
这里就要提到一个标准：W3C

文中最后一句话已经解释了原因：
当表单中只有一个单行文本输入字段时，用户代理应接受在该字段中按Enter键作为提交表单的请求。
既然知道了这种现象不是bug，而是切实的标准后，那我们如何在项目中避免呢，毕竟不是每个项目都希望用户回车的时候突然就触发了提交事件的。
为了提升用户体验，我将提供几个实用方案！
实用方案

1、原生表单

代码复现

1.   <form>
2.     <input type="text" id="myInput">
3.     <button onclick="submitForm()">Submit</button>
4.   </form>

复制代码

上述代码省略了部分提交事件方法，重点突出表单。
解决方案

方案1

在 input 中添加 onkeydown="if(event.keyCode==13){return false;}" 。
通过监听 input 输入框的键盘事件来控制表单进程，keyCode的值为13即按下了回车键，返回false，即为取消提交事件。

1. <form>
2.     <input type="text" id="myInput" onkeydown="if(event.keyCode==13){return false;}">
3.     <button onclick="submitForm()">Submit</button>
4.   </form>

复制代码

方案2

在 form 标签中添加 。
通过主动对form表单添加提交属性，来控制提交事件，return false即为取消提交。

1.   <form>
2.     <input type="text" id="myInput">
3.     <button onclick="submitForm()">Submit</button>
4.   </form>

复制代码

注：有的人可能会困惑，为什么自己的添加了一样的代码，没有生效的问题，这里需要注意一点，就是 button 按钮的默认事件。
MDN-button

从MDN查询到，button 在不添加 type 属性时，默认值是 submit。
所以，如果你按照此方案不生效，请检查下 button 是否有 type 属性，或已经写了 submit ，input 回车仍然会自动提交，请将 button 的 type 属性改为其他值。
方案3

如果你想保证 dom 元素上的整洁清爽，也可以通过 js 的方式。
使用JavaScript阻止默认行为。
你可以给 input 元素添加一个 keypress 或 keydown 事件监听器，并在用户按下回车键时阻止默认行为。

1. document.getElementById('myInput').addEventListener('keypress', function (event) {
2.       if (event.key === 'Enter') {
3.         event.preventDefault();
4.       }
5.     });

复制代码

2、Vue + ElementPlus

代码复现

1. <template>
2.   <el-form>
3.     <el-form-item label="姓名" prop="name">
4.       <el-input v-model="form.name" />
5.     </el-form-item>
7.     <el-form-item>
8.       <el-button type="primary" @click="submitForm">提交</el-button>
9.     </el-form-item>
10.   </el-form>
11. </template>

复制代码

这里用的是 Vue3，vue2+elementUI 也是一样的效果。方案等同。
解决方案

ElementPlus 文档中已经很贴心了做了提示：ElementPlus-Form

就按照官方给出的方案照做就是：

1. <el-form @submit.prevent>
2.     <el-form-item label="姓名" prop="name">
3.       <el-input v-model="form.name" />
4.     </el-form-item>
6.     <el-form-item>
7.       <el-button type="primary" @click="submitForm">提交</el-button>
8.     </el-form-item>
9.   </el-form>

复制代码

当然，也可以写成 @submit.native 效果是一样的。
3、React + Ant Design

代码复现

1. import { Form, Input, Button } from 'antd'interface FormValues {  username: string}const App = () => {  const onFinish = (values: FormValues) => {    console.log('Form values:', values)  }  return (                                        <form>
2.     <input type="text" id="myInput">
3.     <button onclick="submitForm()">Submit</button>
4.   </form>                  )}export default App

复制代码

解决方案

通过对 input 添加 onKeyDown 监听键盘按键来阻止回车提交事件。

1. import React from 'react'import { Form, Input, Button } from 'antd'interface FormValues {  username: string}const App = () => {  const onFinish = (values: FormValues) => {    console.log('Form values:', values)  }  // 监听 onKeyDown 事件，阻止回车键的默认行为  const handleKeyDown = (e: React.KeyboardEvent) => {    if (e.key === 'Enter') {      e.preventDefault()    }  }  return (                  {/* onKeyDown 事件绑定到 Input 组件 */}                              <form>
2.     <input type="text" id="myInput">
3.     <button onclick="submitForm()">Submit</button>
4.   </form>                  )}export default App

复制代码

上述方案，总结完毕！
如果小伙伴有其他更好用的方案，可以留言分享~

来源:https://www.cnblogs.com/codemz/p/18578524
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！