解决element + vue中使用@keyup.enter.native回车刷新页面问题

最新推荐文章于 2024-01-26 16:16:47 发布
最新推荐文章于 2024-01-26 16:16:47 发布
阅读量1.4k 收藏 6
点赞数 3
分类专栏： vue element ui 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41696001/article/details/125535697
版权

element表单中输入框需要监听Enter键盘操作， 添加了@keyup.enter.native后，出现了整个页面的刷新， 地址栏后面还多了一个问号

解决办法：

在form表单位置添加 @submit.native.prevent 就可以正常使用了

 

weixin_41696001
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
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...
vue3.x+vite+ts+vue[email protected] 路由使用demo
07-24
vue3.x+vite+ts+vue[email protected] 路由使用demo，可供学习使用，也可在此基础上写项目
浅谈vue中组件绑定事件时是否加.native
01-19
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt label=用户名 placeholder=请输入用户名></mt> --> <input type=text @keyup.native=show($event)> //普通组件不能添加.native, 添加后事件失效 </template> [removed] import { MessageBox } from 'mint-ui'; export default
关于ElementUI 中 input 上加@keyup.enter.native事件会出现刷新整个页面的问题
最新发布
lyl_csdn_89的博客
01-26 614
form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以 在 form 标签上添加 @submit.native.prevent。<el-form-item label="关键字">
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候，接着触发keypress，松开按键的时候触发keyup事件 中文输入法： firfox：输入触发keydown，回车确认输入触发keyup chrome：输入触发keydown、keyup，回车确认输入只触发keydown IE：输入触发keydown、keyup，回车确认输入触发keydow
解决 element-ui form 表单按回车后整个页面刷新
Zoey_J的博客
08-20 1465
设置 @keyup.enter.native 后，当 el-form 中只有一个输入框时，按下回车会刷新整个页面，只需要在 el-form 上加 @submit.native.prevent 即可。 <el-form :model="queryParams" @submit.native.prevent> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" @keyu
@keyup.native.enter 第一次触发时，会刷新页面
Jerryman_GHJ的博客
10-11 3846
@keyup.native.enter 第一次触发时，会刷新页面 原因：事件包裹在form表单中，enter事件默认触发了表单的提交，导致页面刷新 解决：在el-form标签中加上 @submit.native.prevent，阻止表单的默认行为 ...
@keyup.enter.native和@click.native.prevent是什么意思
热门推荐
NSX-Truth
07-19 1万+
@keyup.enter.native和@click.native.prevent是什么意思 一、 @keyup.enter.native 一般vue的监听组件，是这样写 <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 但是， 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native <el-input v-model="account" placeholder="
Vue 如何触发键盘enter事件
GongWei_的博客
01-05 3477
写法：@keyup.enter.native=“自定义事件” <Input v-model="form.checkCode" placeholder="请输入校验码" @keyup.enter.native="searchAllCompany"> <span slot="append"> {{ code }} </span> </Input> methods:{ searchAllCompany(){ .
@keyup.enter.native
m0_64411343的博客
08-24 2029
@keyup.enter.native
解决vue+element 键盘回车事件导致页面刷新的问题
01-19
今天发现输入框输入内容后回车就会刷新页面 解决 el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there is only one single-line text input field in a ...
基于SpringBoot+MyBatis+Vue+Element的门禁管理系统.zip
11-21
基于SpringBoot+MyBatis+Vue+Element的门禁管理系统.zip基于SpringBoot+MyBatis+Vue+Element的门禁管理系统.zip基于SpringBoot+MyBatis+Vue+Element的门禁管理系统.zip基于SpringBoot+MyBatis+Vue+Element的门禁管理...
@keyup.enter.native不生效？看看@keyup.enter.native和@keyup.enter的区别和使用
南极修炼千年的大冰块
07-23 7775
vue中特殊的键盘修饰符，不必去记特定的keyCode： @keyup.13 == @keyup.enter @keyup.9 == @keyup.tab @keyup.46 == @keyup.delete (捕获 “删除” 和 “退格” 键) @keyup.27 == @keyup.esc @keyup.32 == @keyup.space @keyup.38 == @keyup.up @keyup.40 == @keyup.down @keyup.37 == @keyup.left @keyup.39
键盘回车事件导致页面刷新的问题vue+element
weixin_47560716的博客
01-31 2061
无
element-ui 输入框键盘回车事件导致页面刷新
一片天空
09-29 2222
element-ui 输入框键盘回车事件导致页面刷新的处理方法。
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
花椒和蕊的博客
09-08 1330
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
Vue使用回车键失效的解决方法
小小渔夫
06-23 4590
回车失效原因 查考相关文档得知：即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 。
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
hrbsfdxzhq01的博客
01-04 5657
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写： &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit"&..
vue3 element plus el-button @keyup.enter.native 点击回车无效
09-01
在Vue3中使用Element Plus组件库的el-button组件时，如果希望在键盘按下回车键时触发点击事件，可以使用@keyup.enter.native修饰符。然而，如果点击回车键后没有触发点击事件，可能有以下几个原因： 1. 事件绑定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值