微信小程序input输入框聚焦时闪烁（各种踩坑记录）

最新推荐文章于 2023-11-03 11:02:29 发布
最新推荐文章于 2023-11-03 11:02:29 发布
阅读量5.9k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tt18473481961/article/details/103614856
版权

情景：使用了vant组件，但我发现用原生的也会有这个问题。头大啊......

一、input框聚焦前后字体不一样，没有找到修改方法

二、按设计官方文档设置input的字体大小为11pt，还是闪烁，有重影

三、输入框的长度定死，还是闪烁，有重影

四、换成textarea，不闪烁了，但无法调出不一样的键盘，如数字键盘、身份证键盘，不能这么改。

目前还没找到解决方案，有哪位老铁知道解决方法的能共享下不？欢迎留言！

 

唐小亭
关注
专栏目录
小程序踩坑日记1-----input聚焦问题
qq_40457310的博客
07-15 6284
问题：微信小程序开发工具上测试input有的电脑会有点击input无法聚焦，光标闪一下就消失，但是如果你点击input上面一点的位置就会获得焦点，很奇怪。经过查阅，这个问题跟代码无关，是电脑显示的缩放与布局造成了在开发工具上的显示问题，但是并不会影响实际生产，所以无需担心。解决方法：如果能够适应改变缩放与布局带来的视觉冲击，本人建议修改一下，win10修改的很简单，1.在桌面右击，选择显示设置2....
防抖- 微信小程序输入框input
oldcoder2000的博客
06-22 1656
微信小程序input输入框的bindinput，每输入一个字符都会触发一次，为了避免频繁触发bindinput绑定的函数，可采用”防抖“功能。防抖：在执行bindinput时，第一次触发时，会先设置一个定时器，比如定时1000ms(1秒），在定时器1000毫秒之后，才执行bindinput绑定的函数，即延迟了函数的执行时间，第二次触发时，如果两次时间间隔小于1000毫秒，则清除上一次的定时器（即取消第一次的函数执行），然后设置新定时器，即定时1000毫秒后进行第二次函数操作，以此类推，直至最后一次执行...
小程序输入框闪动？
Dark_programmer的博客
06-20 843
小程序输入框闪动？
小程序input输入内容时内容闪烁问题解决
weixin_41614732的博客
11-20 6590
今天用uni-app开发的时候遇到input输入内容的时候内容闪烁的问题，问题代码如下 <input placeholder="请输入收件人姓名" type="text" v-model="name"/> 检查了以下，可能是v-model指令对数据双向绑定引起的，然后改成用@input监听input的value值，再赋值给name，输入时内容闪烁的问题就解决了。改后的代码如下 &l...
微信小程序清空input操作，为啥要点2次才能清空？
第一千行代码的博客
08-10 539
点第一次失去焦点，点第二次input才被清空 直接贴代码 <view class='searchCon'> <input type='text' placeholder='搜一搜这是什么垃圾?' value="{{inputVal}}" bindinput='searchInput' bindconfirm="seachBtn" placeholder-class="placeholderClass" focus='{{isfocus}}' /> <view ...
详解小程序输入框闪烁及重影BUG解决方案
12-09
前言 本人所说的小程序，都是基于mpvue框架而上的，因此BUG可能是原生小程序的，也有可能是mpvue的。 问题描述 在小程序input组件中，如果使用v-model进行双向绑定，在输入时会出现光标闪烁的BUG。 原因 造成这个BUG的原因，是因为在原生小程序input组件上，进行了封装。才导致光标闪烁的问题。 解决方案 这里提供了两种解决方案。各有各的优势，请选取合适的方案： 一、弃用v-model,使用@input 适用于input组件单纯是用户手动输入的，而没有像授权获取手机号，然后自动填入input组件中。这种需要赋予初始value的情况。即适用于单向绑定，而不是双向绑定
小程序input输入框获取焦点时，文字会出现闪动
weixin_30258901的博客
01-08 6433
　　最近在开发小程序时，发现一个有趣的现象。input里面设置了placeholder，随后当输入框获取焦点时，文字会出现一瞬间的抖动，随后正常。 　　猜想可能是设置的font-family不同引起的抖动，但是还没有找到具体的样式设置，目前还未解决，如有大神有较好的解决办法，欢迎指导。 转载于:https://www.cnblogs.com/lemoncool/p/8241476.html...
解决小程序搜索框输入时的闪动问题
thankseveryday的专栏
07-05 794
解决思路：由于在用户不断输入的同时，会不断的触发搜索事件。所以设置一个定时器，延缓搜索的执行，等待用户停止输入的时候再进行查询。 let timer = null // 搜索框 searchContentChange: function (e) { let keyWords = e.detail.value ? e.detail.value : null let that = this // 清除，定时器 if (timer) { clearTimeout(t
解决input获取焦点后,旁边文字抖动问题
old_hu的备忘录
09-18 1697
当input获取焦点后,旁边手机号字体会抖动 <div class="responsible-phonenumber"> <span>经办人手机号:</span> <div><input class="input" type="text" :maxlength="11" placeholder...
IOS微信浏览器input输入账号键盘闪烁
CrisMing的博客
06-28 1608
解决IOS 浏览器软键盘输入引发页面闪烁问题
微信小程序 input输入框详解及简单实例
08-31
在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、...通过理解和运用这些知识点，开发者可以灵活地在微信小程序中创建各种功能的输入框，满足用户的交互需求。
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的实现方法 微信小程序input框中加入小图标的实现方法是一种常见的需求，特别是在登录注册页面中。通常，我们可以使用background-image属性来实现，但是微信小程序中并不支持这种方法...
h5 IOS微信浏览器input输入账号键盘闪烁
weixin_44201361的博客
09-23 1056
h5 IOS微信浏览器input输入账号键盘闪烁
小程序奇怪的bug——入框内容会滑动飘动
weixin_46121939的博客
11-09 1179
小程序输入框内容会滑动飘动问题
uniapp小程序，部分 ios 真机测试出现 input 输入框内容 跳动 问题
叶子的博客
05-29 3708
uniapp小程序，部分 ios 真机测试出现，input输入框内容 跳动 等问题
微信小程序form表单多input键盘弹框问题
qq_41687299的博客
11-04 955
微信小程序form表单多input键盘弹框问题
vue每次触发弹窗输入框的时候都要让输入框重新聚焦
最新发布
m0_57005111的博客
11-03 310
如何保持每次重新触发弹窗输入框的时候都让其保持自动聚焦呢？
时间转换：toLocaleDateString()有毒，不同浏览器返回的格式不一样
热门推荐
山有木兮木有枝 心悦君兮君不知
10-23 1万+
坑啊！ new Date(new Date().setDate(new Date().getDate() + i)).toLocaleDateString() 解决办法：不要用它，太坑了！ 如果想获取yyyyMMdd格式的字符串： var str= new Date(); var str2= str.getFullYear() + "-" + (str.getMonth() + ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐小亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值