vue中form表单@keyup事件不生效解决办法

最新推荐文章于 2024-03-19 21:35:25 发布
最新推荐文章于 2024-03-19 21:35:25 发布
阅读量839 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44707050/article/details/130719332
版权
在Vue的form表单里，通过添加@submit.native.prevent阻止表单默认提交行为，避免enter键触发页面刷新。在input元素上使用@keyup.enter.native调用方法功能正常。
摘要由CSDN通过智能技术生成

场景 ： 
在form表单的input上 ，添加一个keyup.enter.native事件 ， 但是不生效， enter后会刷新页面；

解决：

在form表单上加@submit.native.prevent即可解决

    <el-form class="form"  @submit.native.prevent>
                   
               
                            <el-form-item>
                                <el-input v-model="ruleForm.bpmnName" placeholder="搜索" size="medium" clearable @blur="getData()" @keyup.enter.native="getData()">
                                 
                                </el-input>
                            </el-form-item>
</el-form>

@submit是提交表单 ， native绑定系统原生事件 ， prevent提交以后不刷新页面

RAY_CHEN.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题
04-17 505
【代码】el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题。
vue element-ui 绑定@keyup事件无效的解决方法
08-27
遇到vue element-ui 绑定@keyup事件无效的问题怎么解决？下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue keyup不起作用
qq_42600948的博客
02-07 1634
@keyup.enter=“submit” 和 @click=“submit” 不能绑在同一个地方，否则回车不起作用。 例如： <button @click="submit" @keyup.enter="submit" >登录</button> 最好的做法是： <form @keyup.enter="submit"> ... <button @click="submit" >登录</button> ... &l
vue element-ui 绑定@keyup事件无效
热门推荐
heqian650的博客
08-04 3万+
解决办法： <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可
vue element-ui 绑定@keyup事件无效
wolf
05-17 1892
&lt;el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup="getGameList(searchParmas.gameName)"&gt;&lt;/el-input&gt; 上面的代码keyup事件一直无法触发，修改为下面&lt;el-input v-model="sea
vue element UI使用 @keyup.enter不生效
yjl13598765406的博客
11-24 2695
vue element UI使用 @keyup.enter不生效
vue 解决form表单提交但不跳转页面的问题
10-16
首先，我们需要理解Vue中事件绑定的概念。Vue提供了`v-on`指令用于监听和处理DOM事件，例如表单的提交事件。`v-on`可以简写为`@`，所以`v-on:submit`可以写作`@submit`。当我们想要在表单提交时执行特定的JavaScript...
解决Vue router-link绑定事件不生效的问题
10-15
总结来说，在使用Vue router-link时遇到事件绑定不生效的问题，可以通过添加native修饰符来解决。同时，在配置Vue Router路由规则时，确保路径正确性，并注意在main.js中正确引入VueRouter实例。这些知识点对于使用...
keyup事件失效
weixin_44788220的博客
01-14 1114
keyup事件失效
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 1003
el-input v-model="form.code" placeholder="请输入code"<el-input v-model="form.code" placeholder="请输入code"问题:@keyup.enter.native外部存在form表单，并且form表单里只有一个input。修改后：此时输入框输入后按回车键即会执行codeVerify方法。原因：当form表单内只有一个input按回车键会自动提交表单。原：此时输入框输入后按回车键不会执行codeVerify方法。
在form表单元素上添加keyup键盘操作，点击回车触发事件，element组件上keyup失效，使用keyup
qq_43305958的博客
08-31 582
在form表单元素上添加keyup键盘操作，点击回车触发事件，element组件上keyup失效总结 keyup用在input上 用了element组件keyup事件加native v-on:keyup.enter.native 总结 good morning
Vue键盘事件keyup、keydown
weixin_41510467的博客
11-09 1026
可以指定某个按键触发，例如制定输入内容后，按enter键触发，代码：<input type="text" v-on:keydown.enter="logName">，也可以同时按多个键触发，例如按alt+enter触发：<input type="text" v-on:keyup.alt.enter="logAge">用法比较简单，直接跟在v-on后面使用，示例：<input type="text" v-on:keydown="logName">,当有键盘按键按下时调用logName()函数。
el-input添加keyup事件无响应
最新发布
ioncannontic的博客
03-19 692
.native修饰符
Vue中的@keyup事件
郭宝的博客
07-01 6955
什么是 @keyup ？ @keyup 是按键松开的事件，当指定的按键松开会触发的事件。常用的事件如下： @keyup常用事件 事件代码 事件描述 @keyup.enter 回车按键松开 @keyup.left 左键松开 @keyup.right 右键松开 @keyup.up 上键松开 @keyup.down 下键松...
vue中key的作用及案例
yyds119的博客
06-24 556
1、key的作用 假设现在有一个需求，在页面循环data中的数组。 <div id="app"> <ul> <li v-for="(item, i) in list"> <input type="checkbox"> {{item.name}} </li> </ul> <script> var vm = new Vue({ el: '#app',
vue+el-form,表单内实现@keyup上下左右箭头移动聚焦
花椒和蕊的博客
02-06 954
表单内上下左右箭头移动聚焦
vue中的@keyup事件
weixin_43196880的博客
08-05 926
什么是@keyup @keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件 事件代码 事件描述 @keyup.enter 回车按键松开 @keyup.left 左键按键松开 @keyup.right 右键按键松开 @keyup.up 上键按键松开 @keyup.down 下键按键松开 @keyup.delete 删除键松开 @keyup 事件使用场景： 平台登录页面可以使用该事件，当输入账号和密码后，无需点击登录按钮，直接在输入密码以后回车完成登录，以增加用户体验 @keyup.enter(回车键
vue element-ui 绑定@keyup.enter事件无效解决办法
总结前端开发中遇到的问题，分享前端知识
09-01 4597
一般情况解决办法： 在按钮上绑定keyup事件，加上.native覆盖原有封装的keyup事件 <el-button type="primary" class="sub-btn" style="width:100%;" :disabled="btnDisabled" :loading="logining" @click.native.prevent="handleSubmit" @keyup.native.enter="handleSubmit">{{loginStr}}</el-bu
vue3中@keyup.enter不生效
03-29
可能是因为你没有在相应的元素上添加 `v-model`，或者你的元素是一个自定义组件，需要在组件内部添加 `v-model`。 另外，需要注意的是，在 Vue 3 中，`@keyup.enter` 的语法已经被弃用了，应该使用 `@keydown.enter` 替代。以下是一个示例： ```html <template> <div> <input v-model="message" @keydown.enter="sendMessage"> </div> </template> <script> export default { data() { return { message: '' } }, methods: { sendMessage() { console.log(this.message) } } } </script> ``` 在上面的示例中，我们在 `input` 元素上添加了 `v-model="message"`，并在 `@keydown.enter` 事件上绑定了 `sendMessage` 方法。当用户按下回车键时，会触发 `sendMessage` 方法，控制台会输出当前输入框中的文本内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值