vue input回车是时的刷新问题

最新推荐文章于 2024-04-17 11:00:00 发布

原创最新推荐文章于 2024-04-17 11:00:00 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

博客指出在Vue中使用回车 @keyup.enter.native时，页面会触发再次刷新。解决办法是加上 @submit.native.prevent 修饰符，避免页面刷新。

 @keyup.enter.native

使用回车 @keyup.enter.native。页面总是会触发再次刷新页面；

<el-input v-model.trim="fixOrderListPara.applicationNo" 
@keyup.enter.native="inquire()"  placeholder="请输入" style="width:70%;" ></el-input>

解决：

<el-form :inline="true"  @submit.native.prevent>  </el-form>

加上 @submit.native.prevent 修饰符即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Chenming_321

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue输入框回车页面刷新

日常笔记/总结/系列知识梳理

06-26

5415

问题描述：在vue项目开发时，运用element-ui或者iView组件的Form组件；当Form组件中只有一个Input组件时，鼠标聚焦输入框后，点击回车键，页面就会刷新。例如以下代码： <Form :model="form"> <FormItem prop="username"> <Input v-model="form.username" placeho...

Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题

彭世瑜的博客

04-29

2104

当form表单中只有一个input时，按下回车建会自动触发页面的提交功能，产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <

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

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

源码好优多

05-10

1万+

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

vue中input使用回车键第一次进入页面的时候总会刷新页面

m0_38081413的博客

01-16

1422

在vue项目开发中，由于界面样式问题，所有的input搜索，没有按钮点击，直接用回车建代替，这样在页面中如果只有一个input输入框的话，在第一次进入页面的时候，在输入框中输入内容后按回车键，不会出现搜索的内容而是会直接跳转页面，这是因为在form中如果只有一个input，那么回车建还会自动触发页面的提交，因此，要解决这个问题，需要在表单中加入：@submit.native.prevent，如： ...

vue输入框回车搜索时间

weixin_45865992的博客

11-30

982

<el-input v-model="itemQuery.searchContent" placeholder="开学特惠" class="searchPlea" style="border-radius: 20px;" @keyup.enter.native="searchbutton"> @keyup.enter.native就是回车事件，

input输入框回车刷新页面

kangluon的博客

04-15

1088

近期测试的时候发现输入框回车会刷新页面，本来只想回车搜索一下的，没想到刷新页面了后来发现可以在表单上添加 @submit.native.prevent，基础是添加在表单的form上不是添加在输入框上 iview的表单实例 <Form :label-width="80" @submit.native.prevent> <Row type="flex" align...

【解决vue中表单回车事件会刷新页面问题】

weixin_47102346的博客

08-02

2491

当vue的搜索框form表单有且只有一个输入框时，点击回车，我们要的效果是带着输入框的value值去查询列表，但实际上会触发刷新整个页面，想让页面不刷新,可使用。需要在form标签加上。

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

10-18

在使用Vue.js结合Element UI开发Web应用时，我们可能会遇到一个常见问题：在表单中通过键盘回车键触发输入事件后，页面发生刷新。这个问题通常是由于W3C标准中关于表单的默认提交行为导致的。在标准中提到，当一个...

vue 项目软键盘回车触发搜索事件

10-14

为了解决这个问题，我们可以将`<input>`包裹在`<form>`标签中，并添加`@submit.prevent`监听提交事件，同时设置`action="javascript:return true"`来防止页面刷新。这样，当用户在iOS设备上点击回车，`<form>`的提交...

Vue的键盘回车事件

记忆者的博客

08-10

1420

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下： <input v-model=“form.name” placeholder=“昵称” @keyup.enter=“submit”> <el-input v-model=“form.name” placeholder=“昵称” @keyup.enter.native=“submit”>

vue input添加回车触发方法

sunshineTing2的博客

12-23

2436

vue input添加回车触发方法普通vue input @keyup.enter="onSubmit" elementUI el-input，需要加 native @keyup.enter.native="onSubmit"

vue中搜索功能中按Enter回车键时路由刷新的解决方法

热门推荐

Kuroko's Development Notes

05-18

13万+

vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit...

Element/iview UI组件不支持keyup键盘事件问题解决办法.native

weixin_40918145的博客

07-16

3672

在使用Element UI或iview UI组件时，会遇到直接写keydown.enter这样的键盘事件会出现无效的情况，这里需要加上native。直接写成下面这样enter事件将无效 1 2 3 <Input type="password" v-model="password" placeholder="password" @keyup...

vue 回车触发聚焦 @keyup.enter.native

小冯的博客

09-21

5万+

vue登录界面输入用户名回车自动聚焦密码框 1.回车触发事件keyupClick： @keyup.enter.native="keyupClick";密码框里放: ref="mima" <van-field v-model="username" clearable type="tel" label="用户名" right-icon="questi...

VUE enter 回车导致页面刷新解决

范特西的博客

11-20

7597

分页中需要输入页码进行跳转，但是却出现跳到指定页面后，页面也刷新了。从而无法满足无刷新的分页。最初代码如下: <form class="zh-skip" action=""> <input type="number" v-model="pageNumber" oninput="if(value<1)value=1" @keyup="

Vue input输入框回车以后自动刷新页面

程邓楠的博客

04-15

2738

今天测试提了一个bug，输入框输入barCode时，按下回车键应该是录入数量，但是却直接刷新页面了，一起来探究一下为什么？原因：W3C 标准中有如下规定：当一个form元素中只有一个输入框时，在该输入框中按下回车应提交该表单。解决方案：可以在标签上添加 @submit.native.prevent。 <el-form label-position="top" size="mini" :inline="true" :disabled="disabledByExtract"...

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

johnhuster的专栏

10-21

7845

遇到这个问题是在网页input输入框按下回车键后被返回到登录页，感觉很奇怪，于是跟踪了代码，发现进入了拦截器流程但获取登录token失败而“踢到”登录页。为什么会获取token失败呢？因为form在没有指明action属性时会以向当前url提交（实际起到了刷新效果，但需要注意的是这时的提交并没有把网址中的查询参数传回去，也就是仅仅就是空空的url），找到问题所在后百度了一下，将其解决，这里给出

Vue input 中使用Enter键页面刷新问题解决

bossjing的博客

05-21

1493

1.出现问题的原因：当form表单只有一个文本框时，按下回车将会触发表单的提交事件，导致页面的刷新。 2.解决办法在form中加入@submit.native.prevent 组织表单提交原Enter事件不变

vue 按回车键页面刷新如何解决

06-06

在 Vue.js 中，如果你想要防止按下回车键时页面刷新，可以使用 `.prevent` 修饰符来阻止默认的提交行为。具体方法如下： ```html <template> <div> <form @submit.prevent="handleSubmit"> <input type="text" v-model="text" /> <button type="submit">提交</button> </form> </div> </template> ``` 在这个例子中，我们使用 `@submit.prevent` 来绑定 `handleSubmit` 方法到表单的提交事件上，并使用 `.prevent` 修饰符来防止默认的提交行为。这样，即使用户按下回车键，也不会触发表单的提交事件，从而避免页面刷新。需要注意的是，`.prevent` 修饰符只能阻止默认的提交行为，如果你想要在用户按下回车键时触发其他事件，比如搜索或查询等，你需要在事件处理程序中手动处理这些逻辑。