项目遇到了这个问题，故作了个临时解决方案，暂时没有想到更好的方法，查阅了网上的方案，也没有找到完美的解决方案。

方案思路:

①弹窗打开时，阻止 body 滚动，禁用 touchmove ，同时记录当前 body 的滚动高度 startScrollTop

②弹窗关闭时，恢复 body 滚动，同时给当前滚动条赋值 startScrollTop ，恢复到弹窗前的高度

③关闭输入键盘时，同样恢复到弹窗前的高度

实现的代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ios11光标错位问题</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <style type="text/css">

        .wrap{

            height: 4000px;

        }

        button{

            margin-bottom: 1000px;

            display: block;

        }

        .fixed{

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            z-index: 2;

            box-sizing: border-box;

            background: rgba(0,0,0,0.2);

        }

        .mask{

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(255,0,0, 0.1);

            z-index: 1;

        }

        input{

            padding: 10px;

        }

        .abs{

            width: 200px;

            padding: 10px;

            position: absolute;

            z-index: 99;

            border: 3px solid #000;

            background: #fff;

        }

    </style>

</head>

<body>

    <h2>顶部</h2>

    <div class="wrap">

        <button type="button" name="button" onclick="showDialog()">show dialog</button>

        <button type="button" name="button" onclick="showDialog()">show dialog</button>

        <button type="button" name="button" onclick="showDialog()">show dialog</button>

    </div>

    <div class="fixed" id="dialog" style="display: none;">

        <div class="mask" onclick="hideDialog()"></div>

        <div class="abs">

            <div><input type="text" onfocus="getDialogScrollTop()" onblur="setDialogScrollTop()" name="" value=""></div>

            <div><input type="text" onfocus="getDialogScrollTop()" onblur="setDialogScrollTop()" name="" value=""></div>

            <div><input type="text" onfocus="getDialogScrollTop()" onblur="setDialogScrollTop()" name="" value=""></div>

        </div>

    </div>

    <h2>底部</h2>

<script>

    var startScrollTop = 0;

    function showDialog() {

        document.getElementById('dialog').style.display = "flex";

        disabledScroll()

        getDialogScrollTop();

        setDialogScrollTop();

    }

    function hideDialog() {

        document.getElementById('dialog').style.display = "none";

        enabledScroll()

    }

    // 取消默认事件

    function stopPreventDefault(e) {

            e.preventDefault();

            e.stopPropagation();

    }

    // 添加 touchmove 事件 禁用滚动条滚动

    function disabledScroll() {

        document.addEventListener("touchmove", stopPreventDefault, false);

    }

    // 取消 touchmove 事件 还原滚动条滚动，同时还原小键盘打开前的滚动高度

    function enabledScroll() {

        document.removeEventListener("touchmove", stopPreventDefault);

        setTimeout(setDialogScrollTop, 200)

    }

    // 获取当前滚动高度并赋值到 startScrollTop

    function getDialogScrollTop() {

            startScrollTop = document.body.scrollTop;

    }

    // 还原滚动高度

    function setDialogScrollTop() {

        document.querySelectorAll('.fixed').forEach(function(ths) {

            ths.style.top = startScrollTop + 'px';

        });

        document.body.scrollTop = startScrollTop

    }

</script>

</body>

</html>

IOS11下fixed中input光标错位问题的更多相关文章

  1. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

  2. IOS中input光标跑偏问题的解决方法

    ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...

  3. ie中input光标问题

    为input 添加 readonly=”readonly”  UNSELECTABLE="on"   属性. IE中设置了readonly=”readonly”,点击使用日期选择器 ...

  4. input光标错位

    文档结构 <div class="noteWrap"> <input type="text" placeholder="写留言&qu ...

  5. 解决IE下readonly的Input光标选中的问题

    首先用unselectable="on"解决,但是这种方法bug太多, 屏蔽了input的onblur事件(也就是focus事件在Angualr下),所以只能用click事件来代替 ...

  6. input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...

  7. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  8. ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  9. elementUi中input输入字符光标在输入一个字符后，光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

随机推荐

  1. YAML描述与Python的对应关系

    YAML是"YAML Ain't a Markup Language"的首字母缩写,其语法简单,结构通过空格来展示,(列表)项目使用"-"来代表,(字典)键值对 ...

  2. 使用HttpURLConnection时遇到的资源未释放的问题

    http://blog.sina.com.cn/s/blog_56beadc60100j9zu.html 今天自己写了一个压力测试的小程序,同时启100个线程,每个线程都串行地访问应用服务器上的一个j ...

  3. C++ 11 中的 Lambda 表达式的使用

    Lambda在C#中使用得非常频繁,并且可以使代码变得简洁,优雅. 在C++11 中也加入了 Lambda. 它是这个样子的 [] () {}...  是的三种括号开会的节奏~ [] 的作用是表示La ...

  4. oracle 基本信息

    查看Oracle是32位还是64位的方法: 方法一:使用sqlplus 64位: [oracle@qs-wg-db2 ~]$ sqlplus / as sysdba;   SQL*Plus: Rele ...

  5. adb设置逍遥游

    . adb设置模拟器属性imei.imsi.手机号.sim卡号2. adb设置充电模式3. 开启|关闭飞行模式4. 获取所有已安装程序apk路径和包名5. adb对指定设备执行指令6. 安装应用7. ...

  6. mac下将根目录／更改组到普通用户，导致sudo不能用

    背景:这是个很愚蠢的故事,我更改了根目录下所有文件的拥有者为普通用户［chown -R xxx / ］.结果sudo/su命令都不能用了……   问题:一旦用sudo命令或su命令就提示: sudo: ...

  7. clear(), evict(), flush()三种方法的用法实例

    先贴代码: @Before public void init() { System.out.println("Test开始之前执行"); Configuration configu ...

  8. oracle中的分支与循环语句

    分支语句 if的三种写法一, if 2 < 1 then dbms_output.put_line('条件成立'); end if; 二, if 2 < 1 then dbms_outpu ...

  9. poj2456（二分+贪心）

    题目链接:http://poj.org/problem?id=2456 题意: 有n个呈线性排列的牲畜堋,给出其坐标,有c头牛,求把两头牛的最短距离的最大值. 思路: 先将坐标排个序.两头牛的最短距离 ...

  10. 第八章 高级搜索树 (xa3)红黑树：插入