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

方案思路:

①弹窗打开时，阻止 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. Life is in the little things --- Spreading wildly on Facebook

    这是在FaceBook上疯传的一组图 简笔画的图画的不算精细 但却狠狠地击中许多人的心灵   有时候生活中简单的一件小事, 恰恰是使得你的人生变得更有意义的一件大事! 别人总告诉你 人生是这样的 ▼ ...

  2. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层

    视频地址:https://www.cctalk.com/v/15114923889408 文章 在前面几节中,我们已经实现了项目中的几个常见操作:启动服务器.路由中间件.Get 和 Post 形式的请 ...

  3. Hibernate 的事物简单的增删查改

    Hibernate 是一个优秀的ORM框架体现在: 1. 面向对象设计的软件内部运行过程可以理解成就是在不断创建各种新对象.建立对象之间的关系,调用对象的方法来改变各个对象的状态和对象消亡的过程,不管 ...

  4. 断开的管道 java.io.IOException: Broken pipe 解决方法

    一.Broken pipe产生原因分析 1.当访问某个服务突然服务器挂了,就会产生Broken pipe; 2.客户端读取超时关闭了连接,这时服务器往客户端再写数据就发生了broken pipe异常! ...

  5. ContextLoaderListener和Spring MVC中的DispatcherServlet学习

    DispatcherServlet介绍 DispatcherServlet是Spring前端控制器的实现,提供Spring Web MVC的集中访问点,并且负责职责的分派,与Spring IoC容器无 ...

  6. springboot 面向切面

    @Aspect @Configuration public class AspectTest { @Pointcut("execution(public String xxx.xxx.xxx ...

  7. 把Excel导入SQL server时出现错误

    在把Excel导入SQL server时出现“未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 ”该 错误信息:未在本地计算机上注册“microsoft.ACE.oledb.12 ...

  8. SUSE11&12 永久关闭防火墙

    SUSE11下:关闭操作为:service SuSEfirewall2_setup stopservice SuSEfirewall2_init stop取消开机启动防火墙:chkconfig SuS ...

  9. Python3 open() 函数

    Python3 open() 函数  Python3 内置函数 Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 ...

  10. Metropolis(多源点最短路)

    Metropolis https://www.nowcoder.com/acm/contest/203/I 题目描述 魔方国有n座城市,编号为.城市之间通过n-1条无向道路连接,形成一个树形结构. 在 ...