ios设备的弹窗页面，光标错位，光标乱跳

如果产品要求在移动端里有弹窗中多个ipnut，趁早找产品沟通不要弹窗，新起页面，此问题巨坑！巨坑！
如果产品要求在移动端里有弹窗中多个ipnut，趁早找产品沟通不要弹窗，新起页面，此问题巨坑！巨坑！
如果产品要求在移动端里有弹窗中多个ipnut，趁早找产品沟通不要弹窗，新起页面，此问题巨坑！巨坑！

一.经常是上下错位，原因是在input 获取焦点以后，键盘弹出后，会把页面往上顶着移动，但是光标停留在了以前的位置，如果页面不复杂，可以在获取焦点后给body上添加 position:fixed ，使用后清除，但是这样会引起页面失去滚动能力,页面中尽量使用absolute，或者是float，还有flex。

二.还有一种情况就是页面中有了弹窗，在弹窗中有多个input（一般大于2个）标签，会出现光标左右平移，或者光标乱跳，点了第一个光标去了第二个，
（1）、左右平移先给input加test-align:left；无效在找别的原因

（2）、此类问题大多解决办法都是把弹窗的fixed定位改为absolute 页面中不要出现fixed定位

（3）、或者是添加fastclick.js库，目前感觉此方法起不到什么作用。。

（4）、仔细观察页面，可以看到页面上的input先聚焦再滚动；也就是说，聚焦事件在页面滚动之前或者滚动完成之前就已经完成了，所以这时候页面滚动，而光标又不跟随滚动，就造成了光标跳行、错乱的问题。
解决方法：
1、输入框在聚焦的时候，会弹起软键盘；所以，我们监听软键盘弹起事件，在弹起事件后，进行dom重绘，但是这种必须要加延时处理
2、当页面出现滚动条时，弹框弹出后，页面回滚至顶部。在不改变原有弹框代码的情况下，有效地解决光标错位问题，但严重影响用户使用，可以给弹出层重新定位：获取滚动条高度，为弹窗重新设置top值；
3、弹框采用absolute定位后，关键是top值的确定ios Safari 输入键盘弹出时，若页面底部被挤压上去，则关闭弹框会复原到页面滚动到底部时的状态，若底部没被挤压上去，每弹出一次键盘，页面都会上去一定距离，且不复原，可以阻止页面的touchmove事件来实现固定底部页面的想法，
4、总结：给input加test-align:left；把页面所有fixed定位改为absolute，阻止页面滚动或者弹出后重新渲染页面或者监听更新弹窗top值或者在设计时不要在弹窗里多个input…巨坑！

ios设备的弹窗页面，光标错位，光标乱跳相关推荐

window使用chrome调试ios设备的H5页面（Safari和APP）
window使用chrome调试ios设备的H5页面(Safari和APP) 1:用管理员身份打开PowerShell,不同操作系统打开方式不太一样,win10的话在搜索栏搜索就能找到( 2:查看Po ...
ios系统input光标错位
如图: 当浮层是固定定位fixed的时候,ios系统上,input输入框的光标会有错位现象,如上图目前找到的解决方法是将fixed改为absolute定位.
ios11，弹出层内的input框光标错位键盘弹出时，输入信息，光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输 ...
JBuilder中光标错位的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 在<JBuilder安装目录>/bin目录下找到jbuilder.config配置文件,在 # Tune this ...
Android打开jsp页面,如何确定是通过jsp页面上的Android设备还是IOS设备访问网页
路上的小 01-15 2878 加载和访问JSP时,将判断是手机Web端还是PC端 $(document).ready(function(){//平台,设备和操作系统var system = {win ...
android界面布局错位,IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...
iframe页面里的链接在ios设备无法点击的解决办法
2019独角兽企业重金招聘Python工程师标准>>> iframe页面,在ios设备浏览器里,滚动后,原来被隐藏的按钮或链接均无法点击,一点击就弹回左上角,可以用下面的方法修正这个 ...
Windows下利用Chrome调试IOS设备页面
本文介绍如何在 Windows 系统中连接 iOS设备并对 Web 页面进行真机调试必须前提 iOS设备.数据线 Node.js 环境 Chrome 浏览器环境准备安装Node环境参考Nod ...
Jbuilder 9.0光标错位问题
Jbuilder 9.0光标错位时需要修改font.properties.zh文件 1.找到.../JBuilder9/jdk1.4/jre/lib/font.properties.zh文件 2.将d ...
解决前端ios设备嵌套的H5页面，点击后退按钮，页面存在缓存，不刷新
var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/; //判断ios设备 if (browserRule.test(navigator.user ...

ios设备的弹窗页面，光标错位，光标乱跳

ios设备的弹窗页面，光标错位，光标乱跳相关推荐

最新文章

热门文章