【踩坑日记】解决antd vue input每输入一个字符就失去焦点

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量4.4k 收藏 2
点赞数 5
分类专栏： 踩坑日记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39633494/article/details/115246244
版权

今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。

结论

检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。

思路

这种情况首先考虑是组件变化重新渲染的问题。
验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。
控制台示例
检查key值，果然：
bug代码

前端摸鱼狮
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” />...或者绑定到data里边的一个字符串，也是可以解决
vue 动态添加的input框 输入一个字符之后会失去焦点
weixin_41919953的博客
12-13 2705
直接使用上层循环的item值作为当前循环对象，导致双向绑定的值会改变data里的值，每一次改变之后会更新table的视图，每一次输入之后input框都会失去焦点 改成直接循环data里的数组的值，数据初始渲染没有问题，输入框绑定的值也没有问题，并且不会更新table视图 ...
解决antdv 中input每输入一个字符就失去焦点
m0_53383900的博客
10-21 2693
解决antdv 中input每输入一个字符就失去焦点
iview的input输入框输入一个字符就失去焦点
weixin_44046781的博客
11-23 633
一般是使用input遍历数组时候 <Row v-for="(item, index) in formValidate.ipList" :key="index+item.name" style="margin: 20px 0" > </Row> 问题点在于:key=“item.name” input数据绑定后进行模型更新后，div的属性要刷新，进行渲染后就重新刷新的input. 不要用item.name这种做k
vue input每次输入一个字符后自动失去焦点 问题
yongyafang123的博客
05-06 3221
问题： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，一个列表组件，每个对象中都有一个input输入框。 <div class="addTags" v-for="(item,index) in list" :key="item.title"> <input type="text" v-model="item.title"> </div> 原因 问题在于:key=‘item.title’，input数据也通过v-model="i
vue input每次输入一个字符后自动失去焦点-与绑定值:key有关
yuan_618859的博客
05-06 7689
vue input每次输入一个字符后自动失去焦点 代码如下，遇到的问题就是： 我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题 <div class="addTags" v-for="(item,index) in...
vue elementUI el-input每次输入一个字符后自动失去焦点
weixin_42303960的博客
10-29 7291
vue elementUI el-input每次输入一个字符后自动失去焦点 input输入框每次输入一次就失去焦点，由于第一次开发后台管理系统 最开始以为是autocomplete的原因，很快发现不是，后来发现是因为v-for绑定的key值原因 v-for="(item,index) in signUpFormProps" :key="item.value+index" 显然每次输入改变了item.value的值导致其进行了渲染，将item.value值去掉后问题就解决了 ...
vue input每次输入一个字符后自动失去焦点
qq_42075072的博客
07-11 1538
vue input每次输入一个字符后自动失去焦点
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
10-14
主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd-input-tag.zip
06-25
Antd react 组件，将input输入值转为tags
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+antd 可编辑表格以及单元格失焦事件
qq_45316181的博客
06-15 813
vue 可编辑表格 单元格失焦事件
Vue中使用v-for循环input失去焦点问题
Jensonhui's Blog
03-22 1900
Vue中使用v-for循环input时，出现输入一个字符，自动失去光标（一次只能输如一个字符）
怎样阻止input输入框失去焦点？
m0_47531829的博客
02-27 4808
项目上面有这样的一个需求： 当时涉资搜索框的时候，只有当按下回车键的时候，才会发送请求，在下面展示信息，需求可能认为用户操作起来比较麻烦，就让我改成失去焦点和回车的时候都能展示信息，当时我以为也很简单，就是把回车事件改成失去焦点事件，但是没想到就这一出改动，让我花了半天多时间来解决。 后来还是在导师的帮助下才解决的。下面，记录一下，我遇到的问题以及解决的方法：首先遇到第一个问题，就是清空输入框的时候，如果焦点还是在输入框里面，就会出问题。 因为我用的是ant-design-mobile组件的第2.
input 失去焦点键盘空白解决
嘿喵财运旺旺
11-14 761
这个问题是手机输入法是第三方输入导致，例如百度输入法、搜狗，ios会有不同版本导致。解决办法是全局监听失去焦点事件。
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 790
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 221
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 443
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
antd-vue input只能输入英文字母或数字
07-27
要限制`<a-input>`组件只能输入英文字母或数字，您可以使用`pattern`属性和正则表达式来实现。 ```html <a-input pattern="[a-zA-Z0-9]+"></a-input> ``` 以上正则表达式`[a-zA-Z0-9]+`表示只允许输入英文字母（大小写不限）或数字。这样设置后，用户在输入框中输入其他字符时将无法输入。 同样地，前端限制用户输入只是一种基本的措施，仍然可能有其他方法绕过这个限制。如果需要更严格的输入验证，建议在后端进行验证。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值