ios系统输入框光标错位问题

最新推荐文章于 2024-12-23 10:06:08 发布

转载

最新推荐文章于 2024-12-23 10:06:08 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrnut/p/8883258.html

文章标签：

#移动开发 #javascript #ViewUI

本文详细记录了解决iOS系统中，由于position:fixed在Safari浏览器解析不一致导致输入框光标错位的问题。作者尝试了多种方案，最终采用将弹框定位改为position:absolute，并通过监听滚动事件和阻止默认滚动行为来实现弹框的正确定位。在处理过程中，作者遇到页面滚动、键盘弹出后的定位恢复等问题，通过细致的思考和调整，找到了相对满意的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出自：http://www.cnblogs.com/zml-mary/p/7816495.html

qa测试手机升级以后弹框输入光标出现错位现象，前两天由于时间紧迫，一直没有找到好的解决方案，今天一天都在解决这个bug问题，临近下班终于算比较好的解决这个问题，觉得有必要理理~

引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。

解决方案：

方案一

一开始上网找解决方案，找到如下处理方式。但存在当页面出现滚动条时，弹框弹出后，页面回滚至顶部。在不改变原有弹框代码的情况下，有效地解决光标错位问题，但严重影响用户使用，只能忍痛舍去~

      
//弹框弹出后执行如下代码
  $('body').css({'position': 'fixed', 'width': '100%'});
//弹框关闭后执行如下代码
  $('body').css({'position': 'relative'});

方案二

尝试多种方式后，只能从源头解决，不使用position:fixed。重写弹框定位，但问题是，这个弹框涉及所有页面，后台开发用这弹框做了很多操作，弹框中间内容由于可以自定义，所以是牵一发而动全身，不敢轻易改，就连上传图片的进度条显示都是用这个弹框做的（就是为了套用弹框的一个

最低0.47元/天解锁文章

200万优质内容无限畅学