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

方案思路:

①弹窗打开时，阻止 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. springboot 使用的配置

    1,控制台打印sql logging: level: com.sdyy.test.mapper: debug 2,开启驼峰命名 mybatis.configuration.map-underscore ...

  2. rsa 公钥 私钥

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

  3. 常用快捷键及eclipise快捷键

    win+R 运行...win+D 桌面win+E 打开我的电脑win+F 搜索 ctrl+D删除光标所在行

  4. 使用maven将项目热发布到tomcat7的坑

    首先是配置tomcat的用户权限问题,最好是配置最大的权限,要不然会报错,我之前就是一直报错 <role rolename="manager"/> <user u ...

  5. PAT L3-004 肿瘤诊断(三维广搜)

    在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶扫描切片中标注出的疑似肿瘤区域,请你计算肿瘤的体积. 输入格式: 输入第一行给出4个正整数:M.N.L.T,其中M和N是每张切片的尺寸(即每张切片 ...

  6. Python反转

    1切片 s="svdfbffdbdf" a=s[::-1] 2入栈出栈 入栈之后再出栈正好就是了 3reverse 这个函数是列表的....你要先把str转成list list-& ...

  7. python scikit-learn 安装中的各种事宜

    由于兴趣,想安装scikit,但是安装时提示pip版本低,让更新,但是他给的更新命令用了之后并不能更新成功(我是指我的) 网上的各种命令都试过了,弄了大半天还是不行,后来我把SCIKIT换成(whl- ...

  8. mysql经典案例分析

    问题: create table A ( id varchar(64) primary key, ver int, ...)在id,ver上有联合索引,10000条数据为什么select id fro ...

  9. 零基础学习hadoop到上手工作线路指导（中级篇）

    此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结. 五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解: hadoop分为h ...

  10. SQL Cursor 基本用法[用两次FETCH NEXT FROM INTO语句?]

    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...