@keyup.enter 首次回车无效问题

最新推荐文章于 2024-06-22 15:54:23 发布
最新推荐文章于 2024-06-22 15:54:23 发布
阅读量2.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunlihong123/article/details/102835108
版权

@keyup.enter绑定在button上，需要点击一次，回车按键才响应。

原因是：keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件了。点击之后，焦点就在按钮上，所以这时按回车键才有效。

解决方法是：把 keyup 事件绑定在 document 上面。

未把 keyup 事件绑定在 document 上面。无效！！！

sunlihong123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现给div绑定keyup的enter事件
10-15
主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown ...
Vue回车键触发 使用 @keyup.enter 事件监听回车键。
最新发布
qq_45595648的博客
06-22 258
【代码】Vue回车键触发。
@keyup.enter失效问题
m0_68394465的博客
12-06 883
@keyup.enter
解决 @keyup.enter 不生效
XD
10-18 1003
@keyup.enter="" 和 @click=“”不能绑在同一个地方，否则回车不起作用 @keyup.enter="" 放在input 中 @click=“” 放在button中
VUE中@keyup.enter无法触发没有效果
IU
09-16 3664
@click 和 @keyup.enter不能一起使用 可以将@keyup.enter绑定到input框上
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
fangqi20170515的博客
11-21 5385
由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。
vue element-ui 绑定@keyup事件无效的解决方法
08-27
总的来说，当遇到Vue Element-UI绑定`@keyup`事件无效的情况时，可以通过添加`.native`修饰符来解决。这个方法可以让你的事件监听器直接绑定到原始的DOM元素上，从而绕过Element-UI组件内部的事件处理。不过，需要...
vue element UI使用 @keyup.enter不生效
yjl13598765406的博客
11-24 2666
vue element UI使用 @keyup.enter不生效
vue element-ui 绑定@keyup.enter事件无效解决办法
总结前端开发中遇到的问题，分享前端知识
09-01 4581
一般情况解决办法： 在按钮上绑定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
[Vue]@keyup.enter不起作用
iChangebaobao的博客
08-19 8718
@keyup.enter=“submit” 和 @click=“submit” 不能绑在同一个地方，否则回车不起作用 错误： <div class="layui-form-item" style="text-align: center"> <button style="width:100%" class="layui-btn" @click="submit" @ke...
Vue+element使用@keyup.enter不起作用
Alive_tree的博客
08-14 2533
今天在写登录功能的时候，在用Vue的@key.enter的时候由于使用elementUI组件，@keyup.enter不起作用，经排查，发现需要这样@keyup.enter.native=“login” 代码 <el-form ref="loginForm" :model="loginForm" :rules="myRules" @keyup.enter.native="login"> <el-form-item prop="account">
解决vue中@keyup.enter失效问题
qq_36603180的博客
11-12 3906
情况一（我遇到的情况）：@keyup.enter外部存在form表单，并且form表单里只有一个input 原因：当form表单内只有一个input按回车键会自动提交表单 解决办法：多增加一个不可见的input即可 情况二（百度时了解到的）：在同一个标签同时添加@click和@keyup.enter 解决办法：分开放，比如@keyup.enter通常放在input里面，@click放在button里面 ...
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 990
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方法。
@keyup.enter事件
z786352260的博客
06-10 9431
今天碰到一个前端的问题搞了半天 当用@keyup.enter敲击enter回车之后直接提交表单, 如果加了el组件就要用 @keyup.enter.native , 但是当你只有一个输入框的时候 from元素上要加上 @submit.native.prevent 不加的话,当你按enter之后页面会刷新地址栏还会多一个"?", 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。
Vue按键修饰符：@keyup.enter
YY的博客
11-21 6464
Vue按键修饰符：@keyup.enter
@keyup.enter和blur发生冲突解决办法（回车键和失去焦点发生冲突时解决办法）
qq_37764320的博客
03-15 1304
问题描述： 当回车时触发保存的同时，input也会失去焦点，同时触发保存函数。 问题解决： 回车时不再调用函数，而是直接调用失去焦点 实例： 修改前： <input class="edit" :value="item.content" @blur="finishEdit(item,$event)" @keyup.enter="finishEdit(item,$event)"
el-input触发不了@keyup.enter
feng_strong的博客
11-22 5721
关于基于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
vue3 element plus el-button @keyup.enter.native 点击回车无效
09-01
1. 事件绑定问题：首先，需确保@keyup.enter.native修饰符被正确绑定到el-button元素上。请检查模板代码，确认el-button元素上是否正确绑定了@keyup.enter.native修饰符。 2. 元素聚焦问题：如果没有正确聚焦到el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值