微信小程序input输入延迟问题 input数据绑定延迟 ios自动删减『 踩坑记录』

最新推荐文章于 2023-11-20 17:13:04 发布
最新推荐文章于 2023-11-20 17:13:04 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： 笔记 文章标签： 小程序 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47917308/article/details/115464542
版权

input输入字符过快的时候会出现延迟显示，一开始是认为数据绑定的原因的

其实这个问题在2020年的时候不少开发者在微信的小程序社区报过bug，但是这个问题出现的条件如下：


1. 在小程序开发者工具的真机调试
2. 调试时在ios平台真机调试
3. 快速的输入任意字符，或过快删减字符，会闪动

解决办法

实际上这情况只出现在 真机调试 的时候会出现，打包成小程序之后就不会出现的了
　　
没用的解决办法：

当初是用uniapp写的，input用v-model的双向数据绑定，出现了这个问题

然后认为是v-model不行了，就用@input="“和 :value=”" 解决了输入过快的问题

但是删除过快的闪动并没有解决

什么都不会的梓桐
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uni-app/微信小程序 @input 延迟500毫秒判断input内容是否持续输出
weixin_42861240的博客
09-04 6642
首先写入一个input和@input方法 <input type="text" v-model="goodsName" @input="inputUp" placeholder="请输入商品名称大于4个汉字""> 在data()中设置goodsName data() { return { goodsName:'', } } 调用inputUp方法 methods...
微信小程序Input组件聚焦问题兼容
踩坑之路
07-16 4477
微信小程序Input组件聚焦问题兼容 前言 最近小程序做得很频繁，无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来，最近在搞的小程序普遍都有表单，其中的Input清除内容以及聚焦弹起键盘的兼容坑得我死去活来，小程序的Input组件我愿称其为最坑组件，没有之一。 需求 先说一下要实现的需求，就是实现一个Input框的清除按钮，要求清除Input框内容并且在清除内容后自动弹起键盘，要求清除按钮只有在输入框聚焦且内容不为空时显示。需求很容易理解，且我一开始以为很简单。。。 实现过程
【uniapp开发小程序】input组件在输入或删除过快时，字会不断的跳动
weixin_48596030的博客
10-25 2454
input组件在输入或删除过快时，字会不断的跳动。 这是一开始的写法： 这个问题是uniapp上的一个bug，百度的结果是：不使用v-modal的双向绑定，用@input 和:value代替v-modal，但是此方法未解决。 解决方式： 在这里插入图片描述 ...
uniapp的input组件和uni-easyinput快速输入值时，出现闪动、延迟的bug 原因以及解决办法。
柑橘乌云_
03-13 3661
我遇到的bug问题：ios端input组件快速输入内容会出现闪动的bug。安卓端并没有，这个bug在微信开发者工具中测试输入，是时好时坏。所以基本没有参考价值，并且有的博客说发布正式版后bug就消失。我发布正式，ios端bug依旧存在。如果是单项数据流，也就是说不用数据回显，默认加载input的value是空，那么就不需要加value值，只需要input事件去单向赋值就好。在网上搜索到了大量的资料发现绝大部分认为是v-model的原因，并有的博客称该bug早在2020年就有人提出来了。
微信小程序input组件抖动及textarea组件光标错位解决方案
wangchaoqi1985的博客
08-07 1456
微信小程序input组件抖动及textarea组件光标错位解决方案
uniapp小程序，部分 ios 真机测试出现 input 输入框内容 跳动 问题
叶子的博客
05-29 3170
uniapp小程序，部分 ios 真机测试出现，input输入框内容 跳动 等问题
微信小程序 input输入及动态设置按钮的实现
08-29
微信小程序 input 输入及动态设置按钮的实现 微信小程序 input 输入及动态设置按钮的实现是微信小程序开发中常用的技术之一。本文将详细介绍微信小程序 input 输入及动态设置按钮的实现的相关技术细节。 首先，在...
微信小程序 input输入框详解及简单实例
08-31
在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的实现方法 微信小程序input框中加入小图标的实现方法是一种常见的需求，特别是在登录注册页面中。通常，我们可以使用background-image属性来实现，但是微信小程序中并不支持这种方法...
微信小程序 input输入框控件详解及实例（多种示例）
01-19
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的...
关于IOSinput框获取焦点延迟的问题。
qq_37933086的博客
06-18 2947
这个问题，在vue组件封装组件中比较明显，点击的时候无法立即获取到焦点，需要点击好几次或者长按。这样就很不友好， 网上看到方案 input, textarea{ -webkit-user-select: auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-u...
【已解决】表单输入抖动
weixin_44921894的博客
08-11 259
【已解决】表单输入抖动
【小程序发版提示】小程序发版内容未及时更新的解决方案
weixin_44514665的博客
03-26 2196
小程序发版内容未及时更新的解决方案
【微信小程序】 input双向数据绑定
Enchanted to meet U
07-29 2715
在微信小程序中，js的数据和前端显示的数据是单数据流 js里边的数据变了，前端能立刻显示 但如果前端数据变了，js不能改变 解决方法 写一个下面的js方法,名称可以任意取，用于绑定input输入 bindInput(e){ // 表单双向数据绑定 var that = this; var dataset = e.target.dataset; // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象 var name .
微信小程序input数据的双向绑定
zhuyuan123456的博客
03-24 6576
先来看一下html代码 再来看下js代码 这种绑定实例就是给input的一个bindinput属性，指定了一个方法名字。如果想要实现双向绑定，必须使用this.setdata这个方法。
微信小程序之vant组件的双向绑定bug
m0_51077750的博客
03-10 628
（但是当我把这个表单关闭，再次打开时，用户名还是344，所以说明数据是有传给js的，但是js中的函数获取用户名时却是空，很纳闷。感觉是v-model=“username"错了，但是。的写法，是model:value=”{{ username}}"也不行！我已经在这个上面花费了两个小时了***
微信小程序开发model:value双向绑定无效的问题
最新发布
weixin_42392456的博客
11-20 716
照着视频敲了半天，双向绑定一直不生效，后来发现model:value之间不能有空格，去掉就好了，真的醉了。
微信小程序-----input数据双向绑定
淘淘桃的博客
07-20 2018
这里介绍两种获取的方式：1、用户每输入一个字节就获取一个字节2、用户全部输入结束了之后，再一起获取整个input输入框的值注意：第二种方式会比较节省内存资源。
vue项目input输入框双向绑定数据不实时生效
热门推荐
Beauty_zhang666的博客
04-23 1万+
<input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> //这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = '1888888888';//这样在页面上时候不会随着输入框值改变...
微信小程序 清空textarea
07-25
在微信小程序中清空textarea，可以通过以下方法实现。首先，你需要在textarea的bindinput事件中绑定一个方法，比如"bindTextAreaChange"。在这个方法中，你可以通过setData来更新textarea的值为空字符串，即setData({info: ''})。这样就可以清空textarea的内容了。\[3\] #### 引用[.reference_title] - *1* [微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置](https://blog.csdn.net/yongyafang123/article/details/128835911)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [微信小程序input、textarea快速删除时光标会跳到最后](https://blog.csdn.net/qq_1296888290/article/details/111954380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [小程序textarea文本框实时字数与内容清空](https://blog.csdn.net/weixin_38946164/article/details/104291806)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值