vue+element Form键盘回车事件页面刷新解决

最新推荐文章于 2025-06-19 07:15:30 发布

zhaohanqq

最新推荐文章于 2025-06-19 07:15:30 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue element form表单 enter事件

本文链接：https://blog.youkuaiyun.com/zhaohanqq/article/details/88998130

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在仅含一个输入框的表单中，通过添加特定属性来阻止默认的回车提交行为，并利用自定义事件实现表单提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。

然后再使用@keyup.enter.native事件绑定回车事件

<el-form :model="ruleForm" @submit.native.prevent>
                <el-form-item label="鉴权金额：" >
                    <el-input v-model="ruleForm.money" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item>
                    <button @click="submitForm('ruleForm')">提交
                    </button>
                </el-form-item>
            </el-form>