qa测试手机升级以后弹框输入光标出现错位现象，前两天由于时间紧迫，一直没有找到好的解决方案，今天一天都在解决这个bug问题，临近下班终于算比较好的解决这个问题，觉得有必要理理~
引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。
解决方案：
& & 方案一
& & & &一开始上网找解决方案，找到如下处理方式。但存在当页面出现滚动条时，弹框弹出后，页面回滚至顶部。在不改变原有弹框代码的情况下，有效地解决光标错位问题，但严重影响用户使用，只能忍痛舍去~
//弹框弹出后执行如下代码
$('body').css({'position': 'fixed', 'width': '100%'});
//弹框关闭后执行如下代码
$('body').css({'position': 'relative'});
& & &尝试多种方式后，只能从源头解决，不使用position:fixed。重写弹框定位，但问题是，这个弹框涉及所有页面，后台开发用这弹框做了很多操作，弹框中间内容由于可以自定义，所以是牵一发而动全身，不敢轻易改，就连上传图片的进度条显示都是用这个弹框做的（就是为了套用弹框的一个遮罩效果）
& & 解决思路：
& & &1.弹框（#pop ）采用position:absolute定位，遮罩（#shadow）采用fixed定位（原先采用absolute定位的，由于有些页面内容是根据用户滚动进行动态加载，导致原先的遮罩不能完全遮住所有内容，当然也可以对某些元素定高进行加载内容，避免此类问题出现，但这次的修改要考虑通用性，后台开发有时候根本不管你这些，关键目前系统很多页面都已经出现这问题了）
& &2.弹框采用absolute定位后，关键是top值的确定
var initTopH = function() {
var tempH = $('#pop').height(); //弹框高度
var screenH = $(window).height();//手机屏幕高度
var scrollH = $(document).scrollTop();//文档内容滚动高度
var topH = scrollH + (screenH - tempH) / 2;//top值高度
return topH;
3.以为这样就可以解决问题，但新的问题出现，当输入框获得焦点时，移动端会弹出键盘挤压弹框上移，关闭键盘后，弹框不会恢复原位，所以需要对弹框失焦后在进行重新定位执行initTopH()
$("#pop input,textarea").off('blur').on('blur', function() {
//这里只是对input和textarea处理
$('#pop').css({'top':initTopH()});
4.& 要成功解决一个问题，就会引发更多的问题需要解决，成功操作1-3的操作后，当弹框弹出后，若页面存在滚动条，此时滚动页面，弹框是不会跟着页面下移的，因为top是写死的。想当然是监听页面滚动（scroll）事件，实时改变top值，但问题是效果太差，抖动、弹跳太明显，qa肯定会提bug的~
& &另一途径就是弹出弹框后禁止页面滚动，以为设置body页面overflow：hidden就好了，然而pc端模拟测试有效果，真实环境仍然不起作用。以为没有给body定高，就都设置html，body标签的高度为100%；但然并卵，反而出现&&$(document).scrollTop() 取值有问题（用$('body').scrollTop()替换仍没用，关键pc端模拟都有效果，一到真实环境就出问题），影响前面弹框定位。烦~烦~烦~，反复测试，都没有实质性的进展~
& & &前面一直纠结于给body定高，但想想还是不妥，很多页面开发者给各自页面都会重新定义样式，我这么暴力地修改，担心影响其他页面布局，所以果断放弃这条路子~
& & 如何在不影响大局的情况下重新布局呢？突然想到了阻止默认事件& e.preventDefault() ，但是新问题又来了，使用这个可以很好的解决页面滚动问题，但也会阻止弹框里内容滚动。纠结ing~
<span style="color: #.左思右想，采取整体除去局部的思想来监听touchmove事件，方法如下，当触摸对象不是弹框时，阻止默认事件，当触摸对象是弹框时，虽然滚动弹框里的内容出现底部页面也滚动的情况，但触摸结束以后恢复原始的滚动高度，经测试效果还不错，也不觉得突兀~
$('#pop').show();
var//记录初始滚动高度
$(document).off('touchstart').on('touchstart', function(e) {
sh = $(document).scrollTop();
$(document).off('touchmove').on('touchmove', function(e) {
if (e.target.id === "shadow") {//除去#pop
e.preventDefault();
$(document).off('touchend').on('touchend', function(e) {
$(document).scrollTop(sh);
总结：虽然可能会有更好的解决方案，但这是我目前觉得比较好的处理方式，每个人所处的开发环境不一样，考虑的东西也不同，所以此方法并不一定都适应，可以借鉴参考。一天都在解决这个bug问题，找资料，尝试各种方法，虽然问题已解决，但还是想好好理顺下思路，故写下这篇随笔~啦~啦~啦~啦，下班啦~
ps：领导说可以看下其他应用的弹框是否有此类问题，看下人家是怎么解决的，但我和小伙伴看了所有app，都没找到类似弹出需要输入文字的弹框（除iphone手机弹出用户输入id密码外），大都是新开一个页面让用户填写，看来产品还是要往用户习惯上靠~
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我做了一个网页，然后嵌入到app中 ，1
在iphone上进行页面跳转的时候，光标没有消失，在另一个页面继续闪烁。2
在iphone中页面上的一个input框和一个取消按钮，输入东西后，我点击取消按钮，input框清空，并且失去焦点，但是失去焦点后光标还在，但是已经失去焦点了，无法再次获得焦点了，即使用$(this).focus()也没用。这是一种情况，还有更坑爹的，当iphone上点击滑动后input框也会失去焦点，也无法再次获得焦点。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
参考这个链接
window.addEventListener(‘load‘, function() {
FastClick.attach(document.body);
}, false);
//300s延迟，解决iPhone上select时常失去焦点，随意跳到下一个输入框，影响用户操作 结合fastclick.min.js使用
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：你的位置： &
> iPhone准确移动光标技巧
iPhone准确移动光标技巧
更新时间：
收藏本页（Ctrl+D）
手机扫描查看
扫描二维码
　　iPhone怎么准确移动光标呢?相信很多用户对于苹果手机如何准确移动光标的还不太清楚，下面统一小编来跟大家分享一下iPhone准确移动光标的技巧，一起来看看吧。
　　1、传统的移哪点哪
　　这是历史最悠久的方式，想要将光标移动到哪里就点哪里，不是特别确定的位置，长按放大显示，即可确认光标的准确位置。
　　这种方式的好处是指哪点哪，直接确认位置，坏处是需要移动手指从键盘到移动光标的位置，如果你是单手的话会有诸多不便，而且有时候移动不到位需要长按放大操作。
　　2、使用 3D Touch 移动光标
　　iPhone 6s 和 iPhone 6s Plus 的键盘加入了3D Touch 功能，直接按压键盘即可变身为触控板。iPhone 6s 和 iPhone 6s Plus 的键盘使用 3D Touch 变为触控板分为两级：一是按压键盘可以将键盘变成触控板，然后在文本上移动光标;二是再次按压并移动光标会选中文本。
　　好处是手不用离开键盘即可上下左右任意移动光标，并且可以选中文本，不便之处在于你需要掌握技巧，否则可能变为输入，不胜其烦。如果你使用 iPhone 6s 或者 iPhone 6s Plus 则可以使用这种方式来移动光标。
　　3、第三方输入法直接在键盘上移动光标
　　和 iPhone 6s 的3D Touch 类似，只是 iPhone 6s 是先使用3D Touch 按压将输入法变为触控板，隐去键盘。而第三方输入法是直接将键盘作为触控板。有两种方式：
　　一种搜狗、百度等，在没有输入的情况下，直接在键盘上滑动即可移动光标，将键盘作为触控板(当然你也可以设置)，好处是便捷，单手操作极好，不好的地方是只能左右横向移动，你要纵向移动，必须移动最左侧或者最右侧才能换到上一行或者下一行。同时你无法选中某一段文字。如果你使用搜狗、百度等输入法就可以直接使用这种方式移动光标。
　　还有一种是 Reboard 这种，将空格键作为移动光标的按键，在空格键上移动手指即可移动光标。相比搜狗和百度哪种整个键盘都是触控板，ReBoard 将空格键作为移动光标的按键虽然操作面减小，但是却能防止误触(当然，搜狗你也可以只按在空格键上作为触控板)，不便在于依然只能横向移动，纵向必须移动到横向尽头。
　　以上是手机移动光标的三种方式，合理利用，可以提高你输入和移动光标的效率。
【上一篇】
【下一篇】
看完这篇文章有何感觉？
(您的评论需要经过审核才能显示,请文明发言！)&&剩余字数：
点击图片更换
统一文章资讯频道声明
1、 所有来源标注为统一下载站或统一文章的内容版权均为本站所有，若您需要引用、转载，请注明来源及原文链接即可，如涉及大面积转载，请来信告知，获取授权。
2、 本站所提供的文章资讯等内容均为作者提供、网友推荐、互联网整理而来，仅供学习参考，如有侵犯您的版权，请及时联系我们，并提供原文出处等，本站将在三个工作日内修正。
3、 若您的网站或机构从本站获取的一切资源进行商业使用，除来源为本站的资料需与本站协商外，其他资源请自行联系版权所有人。
4、 未经统一下载站允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非统一下载站所属的服务器上建立镜像，统一下载站对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。
手机资讯分类
本站资源均收集整理于互联网，其著作权归原作者所有，如果有侵犯您权利的资源，请来信告知，我们将及时撤销相应资源。
Copy . All Rights Reserved.}