解决vue中@keyup.enter失效问题

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量3.7k 收藏 1
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36603180/article/details/121286209
版权

情况一（我遇到的情况）：@keyup.enter外部存在form表单，并且form表单里只有一个input

原因：当form表单内只有一个input按回车键会自动提交表单

解决办法：多增加一个不可见的input即可 

情况二（百度时了解到的）：在同一个标签同时添加@click和@keyup.enter

解决办法：分开放，比如@keyup.enter通常放在input里面，@click放在button里面

皮蛋咸鱼白菜粥
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候，接着触发keypress，松开按键的时候触发keyup事件 中文输入法： firfox：输入触发keydown，回车确认输入触发keyup chrome：输入触发keydown、keyup，回车确认输入只触发keydown IE：输入触发keydown、keyup，回车确认输入触发keydow
vue点击回车不生效请加native
weixin_52236586的博客
02-07 137
【代码】vue点击回车不生效请加native。
vue element UI使用 @keyup.enter不生效
yjl13598765406的博客
11-24 2391
vue element UI使用 @keyup.enter不生效
前端输入框按下回车键的时候执行一个方法
aocang1339的博客
09-26 783
一般在搜索的时候给 input 输入框使用，现在这个写法是我在 vue 项目中使用的 普通 input 写法 @keyup.enter="getData" element 的 input 写法 @keyup.native.enter="getData" 转载于:https://www.cnblogs.com/Hajar/p/11592054.html...
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 868
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方法。
VUE中@keyup.enter无法触发没有效果
IU
09-16 3611
@click 和 @keyup.enter不能一起使用 可以将@keyup.enter绑定到input框上
解决 @keyup.enter 不生效
XD
10-18 940
@keyup.enter="" 和 @click=“”不能绑在同一个地方，否则回车不起作用 @keyup.enter="" 放在input 中 @click=“” 放在button中
@keyup.enter 首次回车无效问题
sunlihong123的博客
10-31 2681
@keyup.enter绑定在button上，需要点击一次，回车按键才响应。 原因是：keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件了。点击之后，焦点就在按钮上，所以这时按回车键才有效。 解决方法是：把 keyup 事件绑定在 document 上面。 未把 keyup 事件绑定在 document 上面。无效！！！ ...
el-input触发不了@keyup.enter
feng_strong的博客
11-22 5698
关于基于vue的框架element  UI el-input 触发不了@keyup.enter='方法' el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin">/el-input> 解决方案 el-input v-model="form.loginName" placehol
vue实现给div绑定keyup的enter事件
10-15
主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件添加事件@click.native操作
01-21
2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item> 补充知识：vue——组件间（兄弟组件间）事件派发与接收 法一 main.js 在初始化vue之前，给...
vue-starter-kit:vue@2.x + [email protected]移动端基础模板
05-17
Vue入门套件 项目设置 npm install 编译和热重装以进行开发 local: npm start dev: npm run dev 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue@3.2.23.js
12-04
是vue3.2.23全文件
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 623
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 254
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 278
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 349
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue @keyup.enter失效
05-25
@keyup.enter 是 Vue 的一个指令，用于监听键盘按下 Enter 键的事件。如果它失效了，可能有以下几个原因： 1. 绑定的事件方法有误：请检查绑定的事件方法名是否正确，是否存在语法错误等问题。 2. 绑定的元素不支持键盘事件：@keyup.enter 只能应用于支持键盘事件的元素上，比如 input、textarea 等。如果你绑定的是一个普通的 div 或者其他非表单元素，那么 @keyup.enter 是无效的。 3. 存在其他冲突的事件监听器：如果你同时在一个元素上绑定了多个事件监听器，可能会存在冲突，导致 @keyup.enter 失效。请检查其他事件监听器是否会阻止 @keyup.enter 的执行。 4. 没有正确引入 Vue：如果你没有正确引入 Vue，@keyup.enter 将无法生效。请检查是否已经正确引入 Vue，并且在组件中正确地使用了它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值