vue element-ui input输入框绑定@keyup回车事件无效

最新推荐文章于 2024-07-15 15:24:14 发布
最新推荐文章于 2024-07-15 15:24:14 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47353884/article/details/119826068
版权

由于element-ui把input进行了封装，input外面是多一层div的
对于el-input，使用 @keyup.enter是无效的，需要加上native限制符。

<el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input"
    @keyup.enter.native="search">
</el-input>

@keyup.13.native 代表的是input 回车事件

狂暴草鱼卷
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-ui实现input输入框金额数字添加千分位
10-15
在本篇文章中，作者详细介绍了如何利用Vue和Element-UI框架实现输入框中金额数字的千分位格式化，以及如何在用户输入时处理这些金额数字。以下详细知识点的总结： 1. 使用Vue和Element-UI框架 Vue是一个开源的...
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
10-19
本文将介绍如何使用Vue.js框架结合Element-ui组件库实现一个带有远程搜索功能和自定义显示模版的输入框组件。我们将通过HTML、JavaScript以及CSS三种代码部分来实现这个功能。 首先，我们需要了解Element-ui中的`el...
el-input 无法触发@keyup.enter 解决方法
weixin_45084986的博客
04-29 914
<el-input type="password" v-model="ruleForm.loginPwd" autocomplete="off" @keyup.enter="submit" ></el-input> 将@keyup.enter="submit"替换成@keyup.enter.native=“submit” <el-input type="password" v-model="ruleForm.loginPwd"
vue @keyup.enter.native回车事件不生效问题
ITyangk的博客
11-13 782
@keyup.enter.native 单个input框不生效问题
Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效
最新发布
qq_38572963的博客
07-15 463
【代码】Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效。
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
fangqi20170515的博客
11-21 5399
由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。
el-input触发不了@keyup.enter
feng_strong的博客
11-22 5722
关于基于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
Element-ui vue 键盘快捷键事件
weixin_37699645的博客
11-27 3745
vue + Element-ui +快捷键事件
vue element-ui 绑定@keyup事件无效的解决方法
08-27
所以，当你在`el-input`上添加`.native`修饰符时，`@keyup`事件会被绑定到输入框的底层`<input>`元素上，而不是Element-UI组件本身。这样，你的事件处理器就能正确地响应键盘抬起事件了。 具体实现如下： ```html ...
火狐浏览器@keyup.enter.native在中文输入法状态下输入的英文enter后出现的问题
weixin_50535566的博客
02-19 832
火狐浏览器@keyup.enter.native在中文输入法状态下输入的英文enter后出现的问题 问题描述：在登录页面按enter键触发登录事件，火狐浏览器出现问题，输入法在中文模式下输入字符enter之后触发了登录事件，报验证码错误，将@keyup修改为@keypress // 有问题的代码 <el-form @keyup.enter.native="handleLogin"></el-form> // 修改后的的代码 <el-form @keypress.enter.na
Vue+element使用@keyup.enter不起作用
Alive_tree的博客
08-14 2543
今天在写登录功能的时候，在用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">
Winform中Datagrid编辑状态下textBox控件不响应Enter按钮的解决方案
guoguo19811025的专栏
10-06 3136
首先，推荐DataGrid控件的使用大全http://www.syncfusion.com/faq/windowsforms/faq_c44c.aspx#q869q 接着，来解决Enter事件的触发问题。 最近做项目时发现DataGrid处于编辑模式下，textbox控件的keydown事件中捕捉不到enter按键，苦死我了，找了半天就是找不到解决方案，按其它按钮都能show出ke
vue element-ui v-on:keyup.13事件 无效
renchaoqiong
04-25 2034
正常调用无效： v-on:keyup.13="handleInit" 添加上native覆盖element自己封装的@keyup事件就可以了。 v-on:keyup.native.13="handleInit" 比心～
解决el-input绑定@keyup事件无效问题
m0_44949211的博客
09-07 2031
解决el-input绑定@keyup事件无效问题 1.input框绑定@keyup事件 <input v-model="firstName" @keyup.enter="方法名"></input> 2.vue中el-input框绑定@keyup事件,需要加上**.native修饰符**,否则不生效 <el-input v-model="lastName" @keyup.enter.native="方法名"> </el-input> ...
VUE中@keyup.enter无法触发没有效果
IU
09-16 3671
@click 和 @keyup.enter不能一起使用 可以将@keyup.enter绑定到input框上
关于vue中的@keyup.enter键盘事件无法生效的解决办法。
qq_44708198的博客
08-03 9084
今天碰到这个问题，写出来分享一下吧 我是想在表单中的input的标签绑定键盘事件，但一直失败 在网上查了一下才明白，键盘的enter是自带提交的表单的事件的，会覆盖键盘事件，所以只要阻止表单的提交就ok了 方法： <form action=’’ class=‘sui-form form-inline’ @submit.prevent=’ ‘> 在表单中添加@submit.prevent...
@keyup.enter.native不生效？看看@keyup.enter.native和@keyup.enter的区别和使用
南极修炼千年的大冰块
07-23 7950
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
value数字 vue_vue element-ui实现input输入框金额数字添加千分位
06-07
您可以使用 Vue 的过滤器来实现添加千分位的功能。首先，在 Vue 实例中定义一个过滤器： ```javascript Vue.filter('thousandSeparator', function(value) { if (!value) return '' return value.toString()....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值