@keyup.enter.native不生效问题解决

已于 2023-04-20 12:17:34 修改
阅读量2.9k 收藏 12
点赞数 3
分类专栏： ElementUI JavaScript 文章标签： javascript 前端 vue.js
于 2023-02-01 14:57:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RD_Xiaobai/article/details/128834029
版权

el-form表单中的el-input回车刷新页面，@keyup.enter.native不生效问题解决

  1. 表单中只有一个input，键盘回车会刷新页面，@keyup.enter就会失效
  2. 解决方法：俩种。
  3. 第一种：在表单里加一个不显示的input(不推荐此写法)
<el-form>
  <el-input v-mode="name1" style="display:none;"></el-input>
  <el-input v-mode="name2" @keyup.enter.native="search"></el-input>
</el-form>
  1. 第二种：在el-form上添加@submit.native.prevent(推荐)
<el-form @submit.native.prevent>
  <el-input v-mode="name" @keyup.enter.native="search"></el-input>
</el-form>
F2E_zeke
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue实现给div绑定keyup的enter事件
11-19
摘要：发现给div绑定keyup.enter事件是没有效果的。那该如何实现呢？下面直接上代码吧 1、在template中代码 2、在created的生命周期中，写一个全局的enter事件 这样按下键盘中的enter事件就是有效的了 补充知识： vue给div绑定keyup的enter事件实现接电话（结合阿里云软电话SDK） 摘要：之前我们的接入的阿里云软电话SDK的功能，现在有个新的需求就是我们自己的弹窗中添加一个按钮可以接听电话，同时可以按键盘的Enter键接电话。（这里的很多废话，是为了记录当时想的逻辑） 实现思路： 1、点击事件接听电话 在create生命周期的时候，监听电话来了
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 875
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中form表单@keyup事件不生效解决办法
weixin_44707050的博客
05-17 733
在form表单的input上 ，添加一个keyup.enter.native事件 ， 但是不生效， enter后会刷新页面；@submit是提交表单 ， native绑定系统原生事件 ， prevent提交以后不刷新页面。在form表单上加@submit.native.prevent即可解决。
vue element-ui 绑定@keyup事件无效的解决方法
08-27
遇到vue element-ui 绑定@keyup事件无效的问题怎么解决？下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈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
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...
@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 3522
写法：@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 2033
@keyup.enter.native
vue element UI使用 @keyup.enter不生效
yjl13598765406的博客
11-24 2401
vue element UI使用 @keyup.enter不生效
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候，接着触发keypress，松开按键的时候触发keyup事件 中文输入法： firfox：输入触发keydown，回车确认输入触发keyup chrome：输入触发keydown、keyup，回车确认输入只触发keydown IE：输入触发keydown、keyup，回车确认输入触发keydow
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
C# KeyUp事件中MessageBox的回车（Enter）键回调问题解决方案
09-04
主要介绍了C# KeyUp事件中MessageBox的回车（Enter）键回调问题解决方案,需要的朋友可以参考下
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
fangqi20170515的博客
11-21 4932
由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。
keyup.native.enter载搜索input元素只有一项时不生效
wanglei的博客
08-05 766
描述： keyup.native.enter=“search”,可以解决敲回车之后不会重新加载当前路由： 但是当search的元素只有一个input时候，此方式失效： 解决方法： a. 当input的个数大于一的时候就不会，出现这个问题，所以方法一： 新加一个input, 加hidden。 方法二： 经查询得知： 在el-form标签中加上 @submit.native.prevent，阻止表单的默认行为。 因为载只有一个input的时候触发了提交报表单事件。 参考链接： https://blog.cs
vue @keyup.enter.native回车事件不生效问题
最新发布
ITyangk的博客
11-13 541
@keyup.enter.native 单个input框不生效问题
Vue使用回车键失效的解决方法
小小渔夫
06-23 4604
回车失效原因 查考相关文档得知：即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 。
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
hrbsfdxzhq01的博客
01-04 5661
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"&..
@keyup.enter.native 不生效
03-16
@keyup.enter.native 不生效可能是因为以下原因： 1. 没有正确绑定事件：请确保你已经正确绑定了 @keyup.enter.native 事件，例如： <input type="text" v-model="inputValue" @keyup.enter.native="handleEnter"> 2. 绑定的元素不是输入框：@keyup.enter.native 只能用于输入框等可以输入文本的元素上，如果你绑定的元素不是输入框，那么它是不会生效的。 3. 输入框没有获取焦点：如果输入框没有获取焦点，那么 @keyup.enter.native 也不会生效。请确保输入框已经获取了焦点。 4. 其他原因：如果以上原因都不是问题所在，那么可能是其他原因导致 @keyup.enter.native 不生效。你可以检查一下浏览器控制台是否有报错信息，或者提供更多的代码和上下文信息，以便我们更好地帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

F2E_zeke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值