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

方案思路:

①弹窗打开时，阻止 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. 在Linux Bash通过上下键快速查找历史命令

    在centos 7中 ~/.bashrc 或者Mac中的 ~/.bash_profile 中添加,然后source一下以下内容: if [[ $- == *i* ]] then bind '" ...

  2. How to Pronounce Ending T Clusters + Homophones — Baking!

    How to Pronounce Ending T Clusters + Homophones — Baking! Share Tweet Share Tagged With: ARE Reducti ...

  3. ubuntu中vim的设置

    问题:刚安装的VIM中,backspace不能删除字符,且上下左右箭头没反应. 解决方法: sudo vi  /etc/vim/vimrc.tiny 修改 set compatible为set noc ...

  4. dubbo+springMVC+Spring+Mybatis

    1.新建Maven Project 1.1   1.2   2新建Maven Module ——提供者和消费者都需要引用的共同代码块(如entity和service接口) 2.1 2.2 2.3 2. ...

  5. rsa 公钥 私钥

    如果用于加密解密,那就是用公钥加密私钥解密(仅你可读但别人不可读,任何人都可写)如果用于证书验证,那就是用私钥加密公钥解密(仅你可写但别人不可写,任何人都可读) 最后,RSA的公钥.私钥是互相对应的. ...

  6. POJ1950----DFS

    Dessert Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6193   Accepted: 2299 Descripti ...

  7. Maven国内镜像-阿里云

    国外的maven下载速度堪忧,大部分国内网络访问都很慢国内的阿里云同样提供了maven的文件镜像使用:1.在maven的setting.xml加入下段代码即可使用阿里云的maven镜像 <mir ...

  8. php 利用http上传协议(表单提交上传图片 )

    主要就是利用php 的 fsocketopen 消息传输. 这里先通过upload.html 文件提交,利用chrome抓包,可以看到几个关键的信息. 首先指定了表单类型为multipart/form ...

  9. win10下安装oracle11G Examples出错[INS-32025][INS-52001]

    安装oracle examples时提示出错:[INS-32025] 所选安装与指定 Oracle 主目录中已安装的软件冲突.[INS-52001] Oracle Database Examples ...

  10. Java 检查异常（checked exception）和未检查异常（unchecked exception）区别理解

    所有异常类型都是 Throwable 类的子类,它包含Exception类和Error类,Exception又包括checked exception和unchecked exception. unch ...