IOS微信浏览器input输入账号键盘闪烁

在开发H5应用的时候去适配微信浏览器，
发现当ios端在文本输入时，会引发键盘的反复闪烁，输入密码时则不会
相反在安卓端表现良好

因为浏览器的重绘行为确实头疼，一开始采用的是给input设置 autoComplete="off" 又或是监听软键盘弹起时将底部布局隐藏，将布局上移，效果都不如人意。
结论得出相邻的输入框会引发ios的自动密码填充，需要对其进行阻断，在账号和密码之间设置一个隐藏的input 去阻断账号密码之间的联动

<input type="number" placeholder-style="color:#BABABA;font-size:28rpx"  v-model="userName" placeholder="请输入手机号" autoComplete="off" />
<input type="text" value="" style=" opacity: 0; width: 0;height: 0;  />
<input type="password" placeholder-style="color:#BABABA;font-size:28rpx" v-model="password" autoComplete="new-password"placeholder="请输入密码" />

同时给账号文本输入框设置
//适用于普通文本

autoComplete="off"

给密码输入框设置
//适用于密码输入框

 autoComplete="new-password"

详情可以看看这位大哥的原文掘金链接

IOS微信浏览器input输入账号键盘闪烁相关推荐

微信浏览器input关闭键盘后导致页面底部空缺问题
移动端页面中有一个input框,点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了. 解决方案: 绑定一个blur事件,当其触发时,使scrollTo为0 <input ty ...
vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
IOS微信浏览器返回事件popstate监听
问题描述: 通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微 ...
【前端】IOS微信浏览器点击右上角遮罩实现
前言现在有一个需求,通过公众号或者链接,下载app应用,大家都知道,安卓和ios下载对应的版本都不一样.并且,ios 微信浏览器不支持应用下载,需要实现一个遮罩功能,提示用户通过浏览器下载,效果如下 ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
popstate android4.3,IOS微信浏览器返回事件popstate监听会立即执行一次
页面跳转从a->b->b1->c,然后从c返回到b再到a.(监听popstate) IOS版的微信,是会立即触法popstate事件,导致直接从C页面跳转到A页面解决办法::: v ...
解决ios微信浏览器时间不兼容的问题
解决ios微信浏览器时间格式不兼容的问题由于ios在微信浏览器中无法识别"YYYY-MM-DD HH:MM:SS"格式的数据,所以在ios中页面将时间格式转换为"YYY ...
[Debug]IOS微信浏览器不支持form表单的target=_blank
测试代码如下 1 <?php 2 echo '<meta name="viewport" content="width=device-width,minimu ...
微信浏览器中IOS12键盘回弹的问题
最近在开发微信公众号项目的过程中,遇到了一个这样的问题.在IOS12中微信浏览器在键盘回弹时,导致页面展示的DOM与真实的DOM存在错位,即当键盘回弹时,点击界面上面的按钮无反应,点击其他输入框也无法 ...

IOS微信浏览器input输入账号键盘闪烁

IOS微信浏览器input输入账号键盘闪烁相关推荐

最新文章

热门文章