解决element中input组件触发事件失效的问题

最新推荐文章于 2024-08-06 03:27:04 发布
最新推荐文章于 2024-08-06 03:27:04 发布
阅读量1.7w 收藏 2
点赞数 1
文章标签： element 触发事件 input @blur 焦点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuer_xiao/article/details/100045778
版权

最近刚接触element组件，在使用el-input组件时需要实现一个功能：

只有一个搜索框，输入内容完成后，自行返回搜索结果

像这样

 

搜索函数已经写好了，只等合适的时间触发事件就好

查了下element官网中input输入框的事件的描述

大喜！

这不是直接@blur="func"就可以了吗，迫不及待的试了一下

啊啊啊啊！不行！

进入页面后只有第一次可以，别的都不行，真是让人头大

不服气的我又试了试@focus、@change。。。。。。。。

都不行！

没有比这再忧伤的故事了...

最后还是百度了下，将@blur="func"改为@input="func"就OK了

有个疑问，官网描述上为什么不带Input事件？（ps.初学者啥都不懂）

 

------------------------------------------------------------------------------------分割线------------------------------------------------------------------------

最新版本的element-ui应该是已经修复过这个问题，现在文档中定义的几种事件都可以正常使用，@change、@input、@blur都是正常的，可以根据自己需要选择

yuer_xiao
关注
element表单验证有input触发验证信息却无效
m0_49789433的博客
04-12 385
你们有没有出现过，表单验证input过多的时候，会有一个验证input触发不了？ ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210412111347833.png 明明就已经触发了事件，却没有反应 这是vue的特性，加一个唯一的key就可以了 ...
解决element中Input输入框组件触发事件失效问题
qq_36635786的博客
02-08 3081
相信只要使用vue的朋友，对于element都不陌生，但是有时候会出现各种各样奇怪的问题； 那么如何解决 element 组件使用事件失效的问题： 问题① ： input输入框 绑定键盘事件 @keyup 无效 ​解决： 使用 .native 修饰符进行绑定 <el-input v-model="state" class="fl" placeholder="请输入内容" prefix-icon="el-icon-search el-input
给禁用的 el-input 添加点击/双击事件
最新发布
weixin_34409887的博客
08-06 45
被禁用的 html 标签，无法响应事件解决方案1：在父元素上添加事件el-input 外添加 div在 div 上添加点击事件 若对事件响应范围限制不严，可以在 el-form-item 上添加点击事件（点击表单标签时也会触发事件），必要时需加上事件修饰符 .native el-input 添加样式 position: r...
element el-input @change 无法触发，@input值出错问题
热门推荐
你蠢哭我咯的博客
06-20 4万+
这里是demo html &lt;div id="app"&gt; el-input &lt;el-input v-model="input" @input="changeValue"&gt;&lt;/el-input&gt; class el-input &lt;div class="el-input"&gt; &lt;inpu
解决input输入框在使用类似Vue框架时，手动赋值不触发事件问题
JCM_ZZ的博客
07-30 1420
解决input输入框在使用类似Vue框架时，手动赋值不触发事件问题
el-input监听事件失效
weixin_45041493的博客
08-20 319
实验了之后发现不仅仅是keyup.enter回车事件，其他事件也被隐藏，需要在其后加.native。在@keyup.enter后加.native即可解决 如下所示。
解决angularJS中input标签的ng-change事件无效问题
10-18
总结来说，`ng-change`在`<input type="file">`中的失效主要是因为浏览器的安全策略。通过结合原生的`onchange`事件和手动调用`$apply()`，我们可以绕过这个问题并实现类似的功能。在AngularJS开发中，理解每个指令...
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
在开发Vue应用时，我们可能会遇到使用第三方滚动库如Vue-scroller时，遇到的一个常见问题：在页面中包含`<input>`输入框时，用户在输入框区域内无法触发滚动操作。这个问题主要是由于Vue-scroller组件内部的源码逻辑...
input标签内容改变的触发事件介绍
09-04
- 脚本中直接改变`value`属性，如`element.value = 'new value'`，不会触发`oninput`事件。 - 用户从浏览器的自动填充或下拉提示中选择一个值，`oninput`事件通常不会触发，除非浏览器特别支持。 - `...
vue element el-input 搜索功能实现防抖 @input事件请求频繁
King Saj
02-23 1808
效果 不要使用el-input的@input事件，使用这个事件，使用防抖无效 代码: <template> <div> <el-input type="number" v-model="form.batchNumber" placeholder="请输入批次" /> </div> </template> <script> export default { data() { return {
VUE Element UI中el-input-number组件无法实时触发change事件
dmr123456的博客
11-03 1万+
el-input-number组件添加必填校验，不使用组件自带增减符号进行填充，手动填充值无法及时清除校验提示，组件失去焦点时才会消失。 希望在输入值之后即时清除校验提示。 解决方案 <el-input-number v-model="form.eventDisposalRange" :min="1" label="描述文字" :disabled="edit" @input.native="eventDisposalRangeChange()
input输入框输入点符‘.’不会触发input或change事件
qq_44308424的博客
02-06 486
写的正则匹配，但是一直未触发input事件。导致可以输入点符，只在下次输入时才会进行input事件替换掉点符。
点击按钮，不执行input的blur方法
四月
01-27 3720
场景 vue点击按钮不触发输入框失去焦点事件 之前在代码运行中发现 在给input添加失去焦点事件后（blur)，点击返回按钮也触发了input失去焦点事件。 解决方法：使用event.preventDefault();
el-input-number组件无法触发change事件，实时校验失效的解决办法
qq_43637218的博客
06-09 4724
解决el-input-number无法实时校验
vue el-input修改值不生效
cyhhhhhh的博客
06-10 1437
vue el-input v-model绑定之后清除不了，是因为绑定的值没有在对象中，比如绑定了searchData.example,设置searchData的example为空时不生效，是因为searchData没有example属性，双向绑定不生效，所有在searchData里给example设置一个初始值就好了。 ...
elment ui 中el-input标签中@input初始化赋值触发问题
Ajaxguan的博客
04-23 748
elment ui 中el-input标签中@input初始化赋值时会触发到@input方法。把@input方法 改成 @change。
el-input组件失去聚焦（blur）事件失效
m0_48332054的博客
03-24 4328
具体处理事项写在this.$nextTick(()=>{})里面， 查阅资料时参考的是：el-input组件自动聚焦（autofocus）事件失效https://blog.csdn.net/yurisa1994/article/details/114376061
input 元素 change 事件失效，失去焦点的时候才执行？什么原因导致？如何正确使用？
赵花花的博客
04-24 4985
按想来说当input输入框里面的内容发生变化后，就会触发change事件啊，change事件不是在输入的时候触发吗？当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件（onkeydown不常用）当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。的地方，刚刚按下的时候还没有写入内容，只有弹起的时候写入才完成，所以控制台总是比输入的内容要慢一拍（少一个）。那仅仅是大家的想当然，其实在。
解决Vue中Element-UI组件使用常见问题
- 表单中的`el-form-item`通常会配合`el-input`、`el-select`等组件使用，它们都有各自的属性和事件，如`placeholder`（占位符）、`clearable`（是否可清除）、`change`（值变化时触发的事件）等，可以根据具体需求...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值