fixed定位 input在IOS设备上光标位置异常问题

页面是个长页面，点击页面不同部分，会弹出弹窗，如果用absolute定位，那么弹窗的位置就难以定位，因而决定采用fixed定位，此时在IOS 11.2.x 系统中就会出现点击input光标位置异常的问题。

异常如图所示：

原因分析

input的父元素是采用fixed定位的元素，此时input输入框在IOS系统存在bug，input元素获得焦点，吊起键盘的时候，页面上fixed定位的元素会被上推，但是光标却留在了原地，造成错位的现象。

解决方案

当点击激活弹窗按钮的时候，给body设置fixed定位，让其也脱离标准流文档，关闭弹窗的时候，让其恢复relative定位。
代码示意：

body {position: relative;
}body.fixed {position: fixed;width: 100%
}

//打开弹窗
openBtn.tap(function(){$('body').addClass('fixed')
})//关闭弹窗
closeBtn.tap(function() {$('body').removeClass('fixed')
})

这里会存在一个小小的问题，就是弹框弹出后，初次点击一次input框的时候，会弹出键盘，能正常输入，但是光标不显示，如果点击两次input输入框，就会显示光标。

弹出了键盘，能输入，但是光标不显示：

再次点击，就一切正常：

后来咨询了一些前端童鞋，很多是采用这种方式，点击一次光标不显示的问题，系系统BUG，后续IOS版本，苹果已经修复该BUG。

目前采用以上方式，如果发现有更好的方式，会后续更新。

fixed定位 input在IOS设备上光标位置异常问题相关推荐

【转】使IFRAME在iOS设备上支持滚动
原文链接:Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员:铁锚很长时间以来, iOS设备上Safari中超出边界的元素 ...
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的 ...
不通过AppStore,在iOS设备上直接安装应用程序的原理
本文转载至 http://mobile.51cto.com/hot-439095.htm 通过itms-services协议,可以通过safari浏览器直接在iOS设备上安装应用程序.利用这种方式, ...
神器面世：让你快速在 iOS 设备上安装 Windows、Linux 等操作系统！
今天我想跟大家分享下,最近连续几天,持续霸榜 GitHub Trending 的一款开源神器:UTM. https://github.com/utmapp/UTM/ 相信在座的各位,多多少少都有过给电 ...
在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...
在iOS设备上如何使用Chrome浏览器的书签
核心提示:谷歌Chrome浏览器iOS版正式登陆AppStore.不过有很多人安装以后没有找到书签工具,以为没有.其实不然.iOS设备上的Chrome浏览器是内置有书签工具的,和Safari相比,不是 ...
《CCNA安全640-554认证考试指南》——第6章在Cisco IOS设备上保护管理层
本节书摘来自异步社区<CCNA安全640-554认证考试指南>一书中的第6章在Cisco IOS设备上保护管理层,作者 [美]Keith Barker , Scott Morris,更多章 ...
html2canvas在手机不行,html2canvas - 在iOS设备上崩溃
我为客户端建立了一个系统,它允许您选择或上传汽车图像,在中键入数字,然后移动/调整大小/旋转/将板倾斜到正确的位置,然后下载图像:html2canvas - 在iOS设备上崩溃这都是每次我在测试设备 ...
在iOS设备上安装Windows、Linux等操作系统！
提到iOS高级玩法,很多人都会想到越狱,但真正的高级玩家,已经在探索如何在iOS上运行其他操作系统了. 2020年,这个想法真的实现了. 首先是在今年3月5日,一位国外的开发团队称,他们在苹果iPho ...

fixed定位 input在IOS设备上光标位置异常问题

原因分析

解决方案

fixed定位 input在IOS设备上光标位置异常问题相关推荐

最新文章

热门文章