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

最新推荐文章于 2023-07-24 17:22:30 发布
最新推荐文章于 2023-07-24 17:22:30 发布
阅读量418 收藏
点赞数
分类专栏： 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 订阅
订阅专栏

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

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

addU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决移动端input点击与失焦事件冲突
yujin0213的博客
12-29 3046
问题描述 如下图所示，移动端的输入框，后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑，但是实现的时候，点击清除按钮，键盘就自动收起了，而且也触发了校验逻辑。交互要求：输入文本的时候键盘是弹起来的，此时点击清除按钮，不让键盘收起；输入完成后，收起键盘，此时点击清除按钮，需要聚焦到input里，且弹起键盘 原因 input点击事件与失焦事件冲突了，在click的时候会先触发blur事件，再触发click事件 解决方案 1、思路 监听清除按钮的mousedown事件，阻止默认事件，即阻止点击后默认失
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
EditorGridPanel中编辑后失去焦点
weixin_34234823的博客
09-16 131
前几天发现一个问题，在GridPanel中有几列可以编辑，但编辑之后发现需要点击其他地方，让它失去焦点后，才可以将数据存在数据库中，如何不点击其他地方时，直接点击保存按钮后也可以存放到数据库中呢？这个问题一直让我纠结了半天，直到晚上同事指点我，让我思考在点击保存按钮之前让它失去焦点；经过一翻努力，终于看到了希望。 例如： ...
微信小程序uni-app输入框textarea/input失焦事件在点击事件之后执行
weixin_45145119的博客
02-25 5868
前言：最近在做一个项目，输入框带清空按钮，因为textarea和input不能在小程序中双向绑定，绑定:value，在输入完成就点击清空按钮，会出现一个问题，清空不了，原因是输入框textarea/input失焦事件在点击事件之后执行，触发了点击事件时此时:value的值还没有被赋值进去，解决办法如下 1.定义一个变量为false，在点击时让这个变量为true 2.在失焦事件中判断如果这个变量为true，说明点击了清空按钮，赋值给:value,同时清空textarea 注意：清空时一定要加setTimeou
uniAPP 如何不让输入框不失去焦点（ 阻止点击默认事件）
weixin_45567213的博客
05-12 4290
场景：输入框与发送按钮是兄弟关系。输入框获取焦点时会唤起键盘，点击发送的输入框会失去焦点。 要求：点击发送按钮时，输入框不能失去焦点，键盘一直呈现唤出状态 分析： 当我们点击某一个元素时，这个元素就会默认获取焦点，在上述场景中，输入框在获取焦点时会唤出键盘，但是由于发送按钮与输入框不是同一个Dom元素，所以点击发送按钮时输入框就会失去焦点，发送按钮就会回去焦点，键盘就是收起。 如果阻止点击Dom元素的默认获得焦点这个事情，那么上一个获取焦点的Dom元素就不会失去焦点。也就是输入框不会失去焦点，键盘就
表单获取焦点和失去焦点
wangmengsasa的博客
06-23 1346
表单获得焦点和失去焦点的一些操作
uni.app小程序失焦聚焦，表单验证
Dummerd的博客
11-24 1251
表单验证
uni-app 封装一个顶部选项卡组件
04-24
uni-app 封装一个顶部选项卡组件
一个uni-app的列表展示小案例.zip
10-27
【标题】: "一个uni-app的列表展示小案例" 是一个基于uni-app框架的应用示例，主要用于演示如何在uni-app中实现数据的列表展示。uni-app是一个多端开发框架，它允许开发者用一套代码实现跨平台应用开发，包括iOS、...
uni-app社交分享全攻略：连接用户的每一次互动
最新发布
07-12
uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它允许开发者编写一次代码，然后发布到不同的平台，包括 Web、iOS、Android、以及各种小程序平台（如微信/支付宝/百度等小程序）。uni-app 由 DCloud 公司开发和...
自定义表单验证
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>
文本框失去焦点问题
05-30
文本框焦点问题解答，没有基础的看着费劲 TextBox组件[2]（文本框组件）是一种常用的，也是比较容易掌握的组件。应用程序主要使用它来接收使用者于输入文字信息。 当我们使用Visual Basic .Net集成开发环境开发应用程序时，在从【工具箱】的【Windows窗体】选项卡中向Form1的设计窗体拖入一个TextBox组件的后，我们可能并没有感觉到即使是这样一个简单的操作，Visual Basic .Net都做了很多幕后工作。主要工作和步骤如下： 1. 首先实例化System.Windows.Forms.TextBox类，并根据拖动到窗体的位置和形状分别设定TextBox实例的各个属性。 2. 我们看到的设计窗体，其实是Form1类的一个实例，而Form1类首先是从System.Windows.Forms.Form类继承而来，Form1类中的成员根据使用者往窗体中拖入的组件不同而不同。各个成员通过Add或AddRange方法加入到Form1中，这样拖入的组件才能够显示在设计窗体上。
uni-app:从运行原理上面解决性能优化问题
01-27
【uni-app】是一款多端开发框架，它允许开发者编写一次代码，就能运行在iOS、Android、Web等不同平台上。然而，由于其非原生的特性，可能会遇到性能问题，这在React Native、Flutter等框架中也同样存在。本文将探讨...
uni-app中让input标签在点击时清空
qq_45401346的博客
04-23 9545
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...
input框失焦bug问题解决
wyzh2000的博客
07-24 795
本文主要讲解input框失焦时事件触发时可能造成的bug与解决方案
Element-UI框架的使用（三）-- Form 表单
weixin_57246557的博客
08-14 6730
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表单验证的问题，实现即时校验、自定义校验规则、异步校验，满足绝大部分表单校验！
uni-app使用uni-forms验证遇到的问题
weixin_47102346的博客
12-16 6317
按照uni-app官网设置验证，但遇到一个问题就是一进入页面，输入框没有获取焦点，直接提交表单，会验证通过了， 官方验证：https://uniapp.dcloud.io/component/uniui/uni-forms 解决方法 闹了半天发现是绑定数据的问题 直接把:modelValue="formData"改为 v-model="formData"即可 验证完整代码如下： <uni-forms ref="form" v-model="regForm" :ru
vue input每次输入一个字符后自动失去焦点
小草莓的博客
01-13 4378
遇到的问题就是，在输入框输入的时候，每输入一次，输入框就自动失去焦点了。 ps：输入框是数组遍历出来的，每次点击新增按钮，就会新增数组元素。
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、付费专栏及课程。

余额充值