阻止el-input聚焦按回车自动刷新页面

原创于 2024-06-18 17:40:02 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在el-form上添加 @submit.prevent 来阻止el-form表单的默认事件

<el-form @submit.prevent></el-form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

C_xran

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

精选资源

解决vue+element 键盘回车事件导致页面刷新的问题

01-19

今天发现输入框输入内容后回车就会刷新页面解决 <el inline=true> </el> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there is only one single-line ...

(vue)阻止表单输入后回车

nyf_unknow的博客

05-30

656

【代码】(vue)阻止表单输入后回车。

参与评论您还未登录，请先登录后发表或查看评论

el-input 禁止回车

weixin_42178050的博客

06-30

2226

el-input 禁止回车

Element-ui阻止表单输入框回车刷新页面

Wnig's Blog

08-22

457

在只有一个输入框el-input的时候，会刷新页面解决办法：在 el-form 上加上 @submit.native.prevent 就可以阻止表单回车提交 <el-form @submit.native.prevent></el-form> ...

前端开发：input框禁止回车刷新

木白的博客

09-07

589

有些解决办法中让添加@submit.native.prevent，但这种写法已经在vue3中淘汰了~<el-form>中添加@submit.prevent。

elementui-plus输入框聚焦时按回车键会刷新页面

03-28

嗯，用户在使用ElementUI Plus的输入框时，按下回车键导致页面刷新，想解决这个问题。我需要先理解问题出现的原因。通常，在表单中，当输入框处于焦点状态时按下回车键，浏览器默认会触发表单的提交事件，从而导致...

vue3中el-input实现6位验证码组件

最新发布

09-25

另外，引用[4]提到，在el-form中回车会刷新页面的问题，我们可以通过@submit.native.prevent来阻止。但我们的验证码输入组件如果嵌套在el-form中，可能也会遇到回车提交的问题，所以我们可以考虑在输入框上添加@...

el-autocomplete的fetch-suggestions事件如何回车触发

06-23

总结：通过监听回车事件，阻止默认行为，然后调用el-autocomplete组件的handleInput方法（通过ref），并传入当前输入值，即可重新触发fetch-suggestions。另外，如果用户使用的是element-plus（vue3版本），方法类似...

el-autocomplete如何设置为回车触发

06-23

我们参考用户的问题：如何将el-autocomplete组件设置为通过回车触发？根据引用内容，我们可以找到一些线索：引用[1]中提到：@keyup.enter.native="search"表示在输入框上监听回车键，触发search方法。引用[2]中示例...

解决Element-plus 给el-input 添加回车事件会刷新页面的问题

qq_58633408的博客

01-31

1691

组件默认情况下，按下回车键会触发表单的提交，而表单的提交会触发页面的刷新。这是浏览器默认行为。@submit.prevent 就可以阻止浏览器刷新页面的默认行为，问题就成功解决啦！解决之后,按下回车，就出发了正则验证，没有刷新页面。然后就按下回车就导致了页面刷新。

VUE实现回车页面刷新，并避免回车刷新全部页面

qq_46399965的博客

06-30

1172

在el-input里面添加@keyup.enter.native="handleQuery"这个函数。这个函数，解决只有单个搜索框时会刷新页面的问题。

el-input上按回车界面自动刷新/跳转问题原因分析及解决办法

weixin_45966674的博客

07-20

1369

是因为el-form一个比较智能的判断如果表单上只有一个输入框 则在输入框上按回车表单就会自动提交且刷新界面老实说挺奇葩的这个智能的判断很多时候都会成为智障因为大部分人都不需要这个功能且很多时候会给大家带来问题这个问题还不容易发现解决办法就是在el-form 上加上@submit.native.prevent 防止事件冒泡参考代码如下...

鼠标聚焦到TextBox输入框时，按回车键刷新页面原因及解决方法

寒色博客

10-10

9448

问题：鼠标聚焦到TextBox输入框时，按回车键刷新页面原因：当中只有一个TextBox输入框时，当输入完成后，按回车键会自动提交，便刷新了页面解决方法： 1、处理form 在form中添加事件 onsubmit

vue+element ui el-form 阻止表单输入框按回车刷新页面

Jokerxiuka的博客

10-13

1376

【代码】vue+element ui el-form 阻止表单输入框按回车刷新页面。

vue 使用element-ui的el-input监听不了回车事件

qq_36708991的博客

02-02

591

vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的： methods: { keys: function(ev) { if (ev.keyCode === 13) { alert("你按回车了")

使用el-input回车会刷新页面

梦雨的博客

08-18

1026

当使用Form组件中只有一个Input组件时，输入后点击回车会出现刷新页面现象，我们可以通过阻止表单的默认提交行为来解决问题。

Vue+Element-UI取消回车刷新页面

mind_me的博客

06-01

498

在vue编写的前端页面中，单个输入框和搜索按钮，输入框内输入了内容之后直接回车，发现页面会被整个刷新。而页面中含有多个输入框，同时回车，不会刷新页面。如果想要按回车实现调用函数，比如搜索，可以继续接上写好的函数

Vue input标签解决自动聚焦的问题

pengnf

06-06

682

1. Apply "H5" premitive tag "autofocus". it's disadvantage is compatibility for different browsers. this.$refs.inp.focus() 2.Declare a directive in Vue as below: Vue.directive ('focus', { inserted (el){ el.focus(); } }) /* adopt it.