iOS11.3以下modal中input光标错位的解决方法

先看一下错位的效果：

这本是iOS系统的一个BUG，不过在iOS11.3以后的系统中修复了；

解决办法：

在body标签中添加样式:

body {
 position: fixed;
 width: 100%;
}

或者

body {
 overflow: hidden;
 height: 100%;
}

ios11，弹出层内的input框光标错位

之前开发了一个微信项目，安全上线，维护期中苹果手机突然出现光标错位现象，经过排查，发现是最新的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);
}

如此一来，页面会回跳到顶部的问题解决了，但是发布以后，实际测试时又发现，弹出层位置错误，弹出getScrollTop()的执行结果显示为0.这又是ios的一个坑，目前还在哼哧哼哧的填。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决ios手机中input输入框光标过长的问题

    在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-size: 14px; color: #333; border: none; outline: none; line-height: 50px; } 修改后css部分代码

  • iOS11.3以下modal中input光标错位的解决方法

    先看一下错位的效果: 这本是iOS系统的一个BUG,不过在iOS11.3以后的系统中修复了: 解决办法: 在body标签中添加样式: body { position: fixed; width: 100%; } 或者 body { overflow: hidden; height: 100%; } ios11,弹出层内的input框光标错位 之前开发了一个微信项目,安全上线,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position:

  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit

  • iOS11中的定位授权的解决方法

    本文介绍了iOS11中的定位授权的解决方法,分享给大家,具体如下: 前台定位权限 1,增加NSLocationWhenInUseUsageDescription. 2,创建CLLocationManager对象,在使用定位服务前调用requestWhenInUseAuthorization(). 3,通过func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorization

  • 关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题. 解决方法:在jquery和bootstrap加载之后引入fix的js,js内容: var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target

  • BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1"  删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod

  • vue中常见的问题及解决方法总结（推荐）

    vue中常见的问题及解决方法总结（推荐）

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • el-table fixed固定列导致错位的解决方法介绍

    目录 1.doLayout(官方提供) 2.<el-table>标签上加一个class="table-fixed" 3.el-table-column增加width 4.我的实现方案 总结 Element UI table组件可以通过设置fixed属性实现列的固定,但是在某些情况下会导致固定列的样式错乱,下面就总结下解决样式错乱实现方案 1.doLayout(官方提供) 对 Table 进行重新布局.当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法. 2.

  • php中unserialize返回false的解决方法

    本文实例讲述了php中unserialize返回false的解决方法,分享给大家供大家参考.具体方法如下: php 提供serialize(序列化) 与unserialize(反序列化)方法. 使用serialize序列化后,再使用unserialize反序列化就可以获取原来的数据. 先来看看如下程序实例: <?php $arr = array( 'name' => 'fdipzone', 'gender' => 'male' ); $str = serialize($arr); //序

  • 关于验证码在IE中不刷新的快速解决方法

    今天在做验证码的时候发现在IE中,验证码不会刷新,而谷歌等其他浏览器没有问题,所以我想到应该是缓存问题,因为IE默认的设置是如果访问地址没变化就不会去获取而是加载缓存中的内容 所以解决方案就是在验证码的切换地址后面加一个随机的参数 例如: <script> //换验证码 function changeimg(){ /* math.random范围是0-1 *999变成0-999 +3000 就是3000-3999 */ var time=Math.round(Math.random()*999

  • Python中MYSQLdb出现乱码的解决方法

    本文实例讲述了Python中MYSQLdb出现乱码的解决方法,分享给大家供大家参考.具体方法如下: 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: 命令:  复制代码 代码如下: show variables like 'character_set_%'; 可以看到如下结果: character_set_client为客户端编码方式: character_set_connection为建立连接使用的编码: character_set_database数据库的编码: ch

随机推荐