VUE 点击回车触发事件和遇到的坑

最新推荐文章于 2024-12-03 10:30:25 发布

原创最新推荐文章于 2024-12-03 10:30:25 发布

· 1.2k 阅读

1 ·

版权

文章标签：

#vue.js #elementui #javascript #前端 #html5

前端开发技术专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何在前端开发中避免表单默认提交带来的页面刷新问题，通过移除form标签、阻止回车事件并提供替代方法来实现。

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

<el-input
          ref="google"
          v-model="Code"
          @keyup.enter.native="submit()"
          autocomplete="off"
          placeholder="请输入内容"
          style="margin-top: 20px"
        >
</el-input>

@keyup.enter="方法名"

一般我们写表单的时候一般放在form里面，按回车就会默认认为你要提交表单而刷新页面。这时候你想找到问题很困难，因为刷新页面什么也输出不到。

解决方法就是放弃form提交，把form标签或el-form标签删除掉。或者阻止回车默认提交表单事件。

<form 
    name="form1" 
    action="*******.php"
    enctype="multipart/form-data" 
    method="post" 
    onkeydown="if(event.keyCode==13)return false;" 
    onSubmit="return checkSubmit();"
>

</form>