【3分钟学会】一招禁用表单中input输入框回车键主动触发提交事情！
知其然知其所以然
在前端项目开发中，偶然会有表单提交的问题：
用户输入表单后，不小心按了回车键，导致提早触发了提交事情？
问题概述
当表单中仅有一个input输入框时，按下回车键就会主动触发提交事情，这是为什么呢？
这儿就要说到一个规范：W3C
文中最终一句话现已解说了原因：
当表单中只要一个单行文本输入字段时，用户署理应承受在该字段中按Enter键作为提交表单的恳求。
已然知道了这种现象不是bug，而是实在的规范后，那咱们如安在项目中防止呢，究竟不是每个项目都期望用户回车的时分忽然就触发了提交事情的。
为了提高用户体会，我将供给几个有用计划！
有用计划
1、原生表单
代码复现
<form>
<input type="text" id="myInput">
<button onclick="submitForm()">Submit</button>
</form>
上述代码省掉了部分提交事情办法，要点杰出表单。
解决计划
计划1
在 input 中增加 onkeydown="if(event.keyCode==13){return false;}" 。
经过监听 input 输入框的键盘事情来操控表单进程，keyCode的值为13即按下了回车键，回来false，即为撤销提交事情。
<form>
<input type="text" id="myInput" onkeydown="if(event.keyCode==13){return false;}">
<button onclick="submitForm()">Submit</button>
</form>
计划2
在 form 标签中增加 onsubmit="return false;"。
经过主动对form表单增加提交特点，来操控提交事情，return false即为撤销提交。
<form onsubmit="return false;">
<input type="text" id="myInput">
<button type="button" onclick="submitForm()">Submit</button>
</form>
注：有的人可能会困惑，为什么自己的增加了相同的代码，没有收效的问题，这儿需求留意一点，便是 button 按钮的默许事情。
MDN-button
从MDN查询到，button 在不增加 type 特点时，默许值是 submit。
所以，假如你依照此计划不收效，请查看下 button 是否有 type 特点，或现已写了 submit ，input 回车仍然会主动提交，请将 button 的 type 特点改为其他值。
计划3
假如你想确保 dom 元素上的整齐清新，也能够经过 js 的方法。
运用JavaScript阻挠默许行为。
你能够给 input 元素增加一个 keypress 或 keydown 事情监听器，并在用户按下回车键时阻挠默许行为。
document.getElementById('myInput').addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
}
});
2、Vue + ElementPlus
代码复现
<template>
<el-form>
<el-form-item label="名字" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
interface IForm {
name: string
}
const form = reactive<IForm>({
name: '',
})
const submitForm = async () => {
if (form.name.trim() === '') {
alert('名字不能为空')
return
}
alert('提交成功:' + form.name)
}
</script>
这儿用的是 Vue3，vue2+elementUI 也是相同的作用。计划同等。
解决计划
ElementPlus 文档中现已很交心了做了提示：ElementPlus-Form
就依照官方给出的计划照做便是：
<el-form @submit.prevent>
<el-form-item label="名字" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
当然，也能够写成 @submit.native 作用是相同的。
3、React + Ant Design
代码复现
import { Form, Input, Button } from 'antd'
interface FormValues {
username: string
}
const App = () => {
const onFinish = (values: FormValues) => {
console.log('Form values:', values)
}
return (
<Form onFinish={onFinish}>
<Form.Item label="Username" name="username">
<Input />
</Form.Item>
<Form.Item label={null}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
)
}
export default App
解决计划
经过对 input 增加 onKeyDown 监听键盘按键来阻挠回车提交事情。
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<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault()
}
}
return (
<Form onFinish={onFinish}>
<Form.Item label="Username" name="username">
{/* onKeyDown 事情绑定到 Input 组件 */}
<Input onKeyDown={handleKeyDown} />
</Form.Item>
<Form.Item label={null}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
)
}
export default App
上述计划，总结结束！
假如小伙伴有其他更好用的计划，能够留言共享~
