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

方案思路:

①弹窗打开时，阻止 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. js中函数的使用方式及回调函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 【Linux】svn环境配置

    Ubuntu 安装svn环境配置 1. 安装 sudo apt-get install subversion 安装过程需要数据[Y] 2. svn位置选择 安装完成之后,选择svn目录位置, 将其放在 ...

  3. .net 委托的用法

    定义了两个委托 //Func有返回值:Action无返回值.两个委托 Func<int,int> f= a =>a+1;//参数,返回值: int reslut=f(5);//6

  4. Guava Cache -- MapMaker.makeComputingMap测试

    canal中很多处使用了MigrateMap.makeComputingMap(Function<? super K, ? extends V> computingFunction)方法, ...

  5. Java finalize以及Garbage Collection

    Java的垃圾回收机制: Java的垃圾回收并不等于C++中的析构.Java中,只有在程序濒临存储空间用完的那一刻,对象占用的空间才会释放.所以,在JAVA程序中,我们通常只考虑创建对象,而从不关心对 ...

  6. Lunch Time(费用流变型题，以时间为费用)

    Lunch Time http://acm.hdu.edu.cn/showproblem.php?pid=4807 Time Limit: 4000/2000 MS (Java/Others)     ...

  7. TZOJ 3533 黑白图像(广搜)

    描述 输入一个n*n的黑白图像(1表示黑色,0表示白色),任务是统计其中八连块的个数.如果两个黑格子有公共边或者公共顶点,就说它们属于同一个八连块.如图所示的图形有3个八连块. 输入 第1行输入一个正 ...

  8. [leetcode]131. Palindrome Partitioning字符串分割成回文子串

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  9. 每天学一点儿HTML5的新标签

    sections部分 (http://www.w3.org/TR/html5/sections.html) 标签:article article标签用来表示页面中一段完整的可以自我包含的片段,具有可重 ...

  10. Phalcon Framework的MVC结构及启动流程分析

    目前的项目中选择了Phalcon Framework作为未来一段时间的核心框架.技术选型的原因会单开一篇Blog另说,本次优先对Phalcon的MVC架构与启动流程进行分析说明,如有遗漏还望指出. P ...