之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅。

  具体情况:弹出层使用position: fixed;弹出层内附带input/textarea输入框,ios11系统的苹果机用户在点击输入框,出现键盘后,弹出层被顶上去,而光标还停留在原处,即出现错位情况。

  解决思路:

  1. 解决光标错位:弹出层设置为position: absolute;body添加position: fixed;
  2. 弹出层重新定位:获取滚动条高度,设置为弹出层Top值;
    function getScrollTop(): string {
    const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    return scrollTop + 'px';
    }

  解决过程中碰到的问题:body设置为position: fixed后,一旦弹出层Top属性被赋值,页面会默认回到最顶端,用户体验感极差。

  在此基础上决定不设置body的定位,改为overflow: hidden; 等用户执行完操作,关闭弹出层时,再还原overflow: initial; 缺点是弹出层底部的内容无法再进行滚动,但是对用户体验无太大影响。在pc上测试无误后发布test环境,真机测试简直爆炸,底部内容仍旧可以自由滑动,连带着固定在上层页面的弹出层一起不受拘束的自由愉快滑动。

  由此发现的坑2:移动端设置body的overflow: hidden不生效,即使附加height: 100%;

  顺着思路下去,决定采取阻止页面的touchmove事件来实现固定底部页面的想法       

public fixBg() {    //阻止页面底部touchmove事件
document.addEventListener("touchmove",function(e){
e.preventDefault();
e.stopPropagation();
},false);
} public flexibleBg() {    //恢复touchmove事件
document.addEventListener('touchmove', function (e) {
e.returnValue = true;
}, false);
}

from:https://www.cnblogs.com/teLumy/p/8257591.html 解释fixed的好链接 http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool&utm_medium=referral 在一个页面中点击一个按钮会出现一个弹出框,这个弹出框给了fixed定位,并且宽高都等于100%,在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题,真机操作的时候会发现,安卓上没有问题,但是在ios上就出现问题了,尤其是ios11系统上,问题表现非常明显。在输入框输入内容的时候,手机下方会弹出一个键盘,然后输入框中光标就跟丢了魂似的乱窜,本以为会是个别手机屏幕问题,拿出几个ios测试机,一番简单测试后发现,是普遍存在的问题,尤其在ios11上比较明显。看着那乱窜的光标,瞬间懵十三了。 
一番简单查阅,了解到这是在ios上存在的一个坑,前人已经给出了几种解决方案,查看几篇相关技术博客,看了一遍,那写的是毛玩意,顿时心有不畅,然后尝试着按照自己理解的思路去解决,结果成了,光标的魂终于回来了。在此分享下我的解决思路: 
如果弹出框是fixed定位,并且弹出框中输入框,那么就很可能会出现这种问题。很简单的解决办法,你把fixed定位去掉,改变你的样式表现方式。我这里是把弹出框改成absolute定位,弹出框的父元素改成relative定位解决的。

ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳的更多相关文章

  1. selenium选错弹出层的下拉框

    要先选中这个弹出层的form元素,再找下拉框 public void downSelectBox(){ driver.get("https://www.imooc.com/user/setp ...

  2. jquery 点击弹出层自身以外的任意位置,关闭弹出层

    <!--弹出层---> <div class="mask">    <div class="wrap"></div&g ...

  3. js-移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

  4. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  5. jQuery弹出层_点击自身以外地方关闭弹出层

    <html> <style> .hide{display:none;} </style> <script type="text/javascript ...

  6. bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入

    如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层  打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...

  7. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  8. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  9. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

随机推荐

  1. Java中==与equals()的区别

    声明转载来源:http://blog.csdn.net/striverli/article/details/52997927 ==号和equals()方法都是比较是否相等的方法,那它们有什么区别和联系 ...

  2. breeze源码阅读心得

            在阅读Spark ML源码的过程中,发现很多机器学习中的优化问题,都是直接调用breeze库解决的,因此拿来breeze源码想一探究竟.整体来看,breeze是一个用scala实现的基 ...

  3. hadoop集群简单搭建

    分布式搭建 在ubuntu下创建hadoop用户组和用户 bigdata@master:~$sudo addgroup hadoop bigdata@master:~$sudo adduser --i ...

  4. c语言-第零次作业

    1.你认为大学的学习生活.同学关系.师生应该是怎样?请一个个展开描述. 我很荣幸能考进集美大学.集美大学历史悠久.师资力量雄厚.教师与学生素质高.并且集美大学的学习生活和我理想中的一样!首先老师认真负 ...

  5. 使用genstring和NSLocalizedString实现App文本的本地化

    OS提供了简便的方法来实现本地化,其中用的最多的就是NSLocalizedString. 首先查看下NSLocalizedString是什么: #define NSLocalizedString(ke ...

  6. Flask 扩展 Mail

    安装 pip install flask-mail from flask import Flask from flask_mail import Mail, Message app = Flask(_ ...

  7. EMC CX4-480服务器raid磁盘数据恢复案例

    [用户信息]上海某公司 [故障描述]需要进行数据恢复的设备是一台EMC CX4的存储服务器,因为硬盘出现故障导致整个存储阵列瘫痪.整个LUN是由7块1TB的硬盘组成的RAID 5.但服务器共有10块硬 ...

  8. 双击CAD对象(具有扩展数据),显示自定义对话框实现方法

    转自:Cad人生 链接:http://www.cnblogs.com/cadlife/p/3463337.html 题目:双击CAD对象,显示自定义对话框实现方法 内容粘贴如下: 主要是绑定两个事件: ...

  9. REST or RPC?

    1 概念 1.1 RPC RPC(Remote Procedure Call)-远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存 ...

  10. NFS PersistentVolume - 每天5分钟玩转 Docker 容器技术(151)

    上一节我们介绍了 PV 和 PVC,本节通过 NFS 实践. 作为准备工作,我们已经在 k8s-master 节点上搭建了一个 NFS 服务器,目录为 /nfsdata: 下面创建一个 PV mypv ...