记录一个uni-forms表单每输入一次就自动失去焦点的问题

最新推荐文章于 2024-05-27 14:49:48 发布
最新推荐文章于 2024-05-27 14:49:48 发布
阅读量454 收藏
点赞数
分类专栏： uni-app Vue 文章标签： uni-forms
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyinglf/article/details/116306472
版权
uni-app 同时被 2 个专栏收录
20 篇文章 4 订阅
订阅专栏
Vue
17 篇文章 1 订阅
订阅专栏
本文探讨了在Vue中使用v-for循环时，由于key值变动导致DOM更新的问题。作者指出，不稳定的key可能会引起不必要的bug，建议避免使用不确定性的key绑定，以确保组件正确渲染。通过理解key的作用，可以更好地优化前端应用的性能。
摘要由CSDN通过智能技术生成

快下班了，长话短说
局部代码：
在这里插入图片描述
我之前是在key里面放了个input变量进去了，这确实也是个低级错误，但是此类问题的原因应该大同小异，就是v-for底层map循环的时候，key值发生了变化，导致dom更新，出现这个问题，去掉不确定性的key值绑定就好了

所以，用key要谨慎啊！一不小心找bug就是半天过去了

addU
关注
专栏目录
解决移动端input点击与失焦事件冲突
yujin0213的博客
12-29 3205
问题描述 如下图所示，移动端的输入框，后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑，但是实现的时候，点击清除按钮，键盘就自动收起了，而且也触发了校验逻辑。交互要求：输入文本的时候键盘是弹起来的，此时点击清除按钮，不让键盘收起；输入完成后，收起键盘，此时点击清除按钮，需要聚焦到input里，且弹起键盘 原因 input点击事件与失焦事件冲突了，在click的时候会先触发blur事件，再触发click事件 解决方案 1、思路 监听清除按钮的mousedown事件，阻止默认事件，即阻止点击后默认失
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
weixin_43403746的博客
03-02 3919
使用“动态表单校验”来解决uni-app中“多级结构对象数据”的校验问题，
EditorGridPanel中编辑后失去焦点
weixin_34234823的博客
09-16 141
前几天发现一个问题，在GridPanel中有几列可以编辑，但编辑之后发现需要点击其他地方，让它失去焦点后，才可以将数据存在数据库中，如何不点击其他地方时，直接点击保存按钮后也可以存放到数据库中呢？这个问题一直让我纠结了半天，直到晚上同事指点我，让我思考在点击保存按钮之前让它失去焦点；经过一翻努力，终于看到了希望。 例如： ...
微信小程序uni-app输入框textarea/input失焦事件在点击事件之后执行
weixin_45145119的博客
02-25 5994
前言：最近在做一个项目，输入框带清空按钮，因为textarea和input不能在小程序中双向绑定，绑定:value，在输入完成就点击清空按钮，会出现一个问题，清空不了，原因是输入框textarea/input失焦事件在点击事件之后执行，触发了点击事件时此时:value的值还没有被赋值进去，解决办法如下 1.定义一个变量为false，在点击时让这个变量为true 2.在失焦事件中判断如果这个变量为true，说明点击了清空按钮，赋值给:value,同时清空textarea 注意：清空时一定要加setTimeou
【uniapp】uniapp input 焦点聚焦失败【已解决】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-10 3600
苹果11真机调试uniapp()小程序中的input，聚焦失败。安卓机没有这问题~
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
最新发布
qq_45067263的博客
05-27 2508
我是form表单嵌套表格，里面的el-input输入框，输入第一个值的时候会突然失去焦点，需要再次点击输入框才能正常输入，原因是table的key值，需要改成正常的index即可，如果你是循环的，也改为index就行。
uni-app开发——使用uni-forms在input表单校验遇到复杂自定义操作时，第一次无法响应校验的坑
add-oil的博客
04-14 3030
表单选的时提交时做校验， validate-trigger="submit" 自定义了表单事件，第一次点击提交无法触发校验，再选择操作，才没问题 <uni-forms-item class="side-padding" :name="item.prop" :required="item.required||false" :label="item.label" v-else-if="item.type==='actionsheet'&&item.hidden!==false">
uni-app开发——基于uni-forms和ThorUI简单封装的表单组件
add-oil的博客
04-13 1203
uni-app出现较长时间了，优势也是不言而喻（一次开发能应用小程序、app、网页等），但一直觉得伴随其出现的UI组件相当不成熟，开发起来总是遇到很多难题。 这里描述一下uni-app开发中表单的处理，页面样式大体： 废话也不多说了，类似这种的申报页面多的很，那肯定要提取公共部分进行封装咯。 大体借鉴一下思想吧，此处代码多是应对本次项目开发，不具备 多项目的一般性 <!-- **基于uni-forms和ThorUI简单封装的表单组件** **itemsDatas的prop 对应的是 fromDa
uni-app 表单验证
qq_32914215的博客
01-21 5554
uni 表单验证 本文只用做记录及学习使用 <uni-forms modelValue="formData" ref="setPwdForm" :rules="rules"> <uni-forms-item label="手机号:"> <uni-easyinput type="number" v-model="formData.phone" maxlength="11" placeholder="请输入11位电话号码" /> </uni-forms-item
uni-app登录实例的实现
10-29
在移动应用开发领域，uni-app是一个备受青睐的跨平台框架，它允许开发者用一套代码实现多端部署，包括iOS、Android、Web等。本实例将详细讲解如何使用HBuilderX工具来开发一个uni-app登录功能。 首先，我们需要了解...
自定义表单验证
05-13
简单的js表单验证 <script type="text/javascript"> function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名！"; return false; } else{ for(var i=0; i<userN.length;i++) { var un=userN.substring(i,i+1); if(!(un>="a" && un<="z") && !(un>="A" && un<="Z")){ document.getElementById("nerror").innerHTML="用户名中不能包含数字与特殊字符！"; return false; } } document.getElementById("nerror").innerHTML=""; return true; } } function validatePW(){ var userPW=document.myform.userPassWord.value; if(userPW.length==0){ document.getElementById("pwerror").innerHTML="请输入密码！"; return false; } else if(userPW.length<6){ document.getElementById("pwerror").innerHTML="密码长度不能小于6位并且不能包含特殊字符" } } function validate(){ if(validatename() && validatePW()) { return true; } return false; } </script>
uniAPP 如何不让输入框不失去焦点（ 阻止点击默认事件）
weixin_45567213的博客
05-12 4629
场景：输入框与发送按钮是兄弟关系。输入框获取焦点时会唤起键盘，点击发送的输入框会失去焦点。 要求：点击发送按钮时，输入框不能失去焦点，键盘一直呈现唤出状态 分析： 当我们点击某一个元素时，这个元素就会默认获取焦点，在上述场景中，输入框在获取焦点时会唤出键盘，但是由于发送按钮与输入框不是同一个Dom元素，所以点击发送按钮时输入框就会失去焦点，发送按钮就会回去焦点，键盘就是收起。 如果阻止点击Dom元素的默认获得焦点这个事情，那么上一个获取焦点的Dom元素就不会失去焦点。也就是输入框不会失去焦点，键盘就
表单获取焦点和失去焦点
wangmengsasa的博客
06-23 1393
表单获得焦点和失去焦点的一些操作
uni.app小程序失焦聚焦，表单验证
Dummerd的博客
11-24 1365
表单验证
uni-app使用uni-forms验证遇到的问题
weixin_47102346的博客
12-16 6635
按照uni-app官网设置验证，但遇到一个问题就是一进入页面，输入框没有获取焦点，直接提交表单，会验证通过了， 官方验证：https://uniapp.dcloud.io/component/uniui/uni-forms 解决方法 闹了半天发现是绑定数据的问题 直接把:modelValue="formData"改为 v-model="formData"即可 验证完整代码如下： <uni-forms ref="form" v-model="regForm" :ru
uni-app中让input标签在点击时清空
qq_45401346的博客
04-23 9677
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...
input框失焦bug问题解决
wyzh2000的博客
07-24 1170
本文主要讲解input框失焦时事件触发时可能造成的bug与解决方案
Element-UI框架的使用（三）-- Form 表单
weixin_57246557的博客
08-14 6873
Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 一、基本使用 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"&
小程序表单校验uni-forms正确使用方式及避坑指南
热门推荐
iamlujingtao的博客
05-13 1万+
解决小程序上使用uni-forms表单验证的问题，实现即时校验、自定义校验规则、异步校验，满足绝大部分表单校验！
uniapp uni-forms表单校验
10-04
uni-forms是uni-app框架中用于表单校验的插件。它可以满足一些常见表单校验的需求，如即时校验、自定义校验规则和异步校验。在使用uni-forms进行表单校验时，可以通过添加validate-trigger="bind"来实现即时校验，即在输入框失焦时立即校验值。同时，还可以通过在input标签上添加@blur="binddata('字段名', $event.detail.value)"来触发校验。 举个例子，以下是一个使用uni-forms进行表单校验的示例代码： <uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind"> <uni-forms-item label="账号" name="account"> <input v-model.trim="ruleForm.account" @blur="binddata('account', $event.detail.value)" placeholder="请输入您的登录账号" /> </uni-forms-item> </uni-forms> 除了即时校验外，uni-forms还支持自定义校验规则。你可以根据具体的需求，通过编写自定义的校验规则来实现特定的校验逻辑。 请问还有其他相关问题吗？ 相关问题: 1. uni-forms如何实现自定义校验规则？ 2. uni-forms如何进行异步校验？ 3. uni-forms支持哪些常见的表单校验规则？
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值