最近提测后,发现ios升级到12版本之后,引发了调用确认框的组件之后按钮失效问题。

然后开始了升级复现bug的各种操作,最后发现是完成后键盘收起后,页面没有回滚,因为页面整体被推上了一定高度,导致错位,从而引起后定位显示的确认框组件中的按钮失效(实际的生效位置在显示位置的上方)。

整体开发使用的是vue框架,ui框架使用的是vant,没有再单独引入jquery,这个问题我最后使用原生js解决的。

整体思路是,首先监听聚焦,给一个标志位,然后在失焦的时候判断是否为真正失焦(即其他的input是否同时被聚焦),然后在真正失焦时,重置页面滚动高度,从而达到键盘收起后页面回到原来位置的操作。

ios12版本以上键盘唤起后,收回页面不回滚问题的更多相关文章

  1. 阻止iOS中页面弹性回滚,只允许div.phone_body的区块有弹性

    使用说明:只要替换选择器:var selector = '.phone_body'; /** * 阻止iOS中页面弹性回滚,只允许div.scroller的区块有弹性 */ (function () ...

  2. 事务场景中,抛出异常被catch后,如果需要回滚,一定要手动回滚事务

    Spring使用声明式事务处理,默认情况下,如果被注解的数据库操作方法中发生了unchecked异常,所有的数据库操作将rollback:如果发生的异常是checked异常,默认情况下数据库操作还是会 ...

  3. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  4. Html页面加回滚

    <div class="top-box"> <img src=" class="youlink-img" /><br / ...

  5. IOS键盘收起后,页面底部留白处理

    环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...

  6. 兼容h5在ios上登录窗口input失焦后页面不会滚

    $("#logincode").blur(function(){ //滚动到顶部 window.scrollTo(0, 0); })一般多用于密码框失焦后,页面不回滚

  7. input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  8. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  9. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

随机推荐

  1. package.json 里的 dependencies和devDependencies区别

    dependencies(依赖的意思): 通过 --save 安装,是需要发布到生产环境的.比如项目中使用react,那么没有这个包的依赖就会报错,因此把依赖写入dependencies devDep ...

  2. kettle 分组

    kettle 分组组可以实现group_concat的效果

  3. maven配置及IDEA配置maven环境

    一. maven的下载及配置 1. maven下载地址 可以在网址:https://maven.apache.org/download.cgi下载最新版本的maven 2. maven文件解压缩 解压 ...

  4. 关于vscode插件 的一些体验

    一 vsCode git 首先vscode 继承了 git 在使用git前 先手动创建一个文件夹  用来clone已有项目 然后将 clone下来的项目放入工作区 右上角的小转转就是 pull文件 更 ...

  5. C# - 设计模式 - 模板模式

    模板模式 问题场景 咖啡和茶派生于抽象类饮料,咖啡和茶都具有烧水的方法,所以可以将烧水的方法提取到抽象类饮料中去实现,而咖啡具有一个向杯子加咖啡粉的方法,茶具有一个向杯子加茶叶的方法,看起来两个方法是 ...

  6. kali中的webshell工具--webacoo

    webacoo webshell其实就是放置在服务器上的一段代码 kali中生成webshell的工具 WeBaCoo(Web Backdoor Cookie) 特点及使用方法 类终端的shell 编 ...

  7. 2018-2019-2 20165221 【网络对抗技术】-- Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165221 [网络对抗技术]-- Exp6 信息搜集与漏洞扫描 目录 1. 实践目标 2. 实践内容 3. 各种搜索技巧的应用 a. 搜索网址的目录结构 b.使用IP路由 ...

  8. Python学习笔记-Django连接SQLSERVER

    Django连接SQLSERVER使用的是odbc驱动. CentOS下安装django-obdc-azure时需安装依懒 yum install gcc yum install gcc-c++ yu ...

  9. HDU - 1062

    格式错误2遍:没考虑到连续两个空格的情况,遇到空格最后要输出这个空格,因为题目只需要转换单词. 另外,开cin,cout加速要注意读入不能用scanf,printf,puts,getchar这些.ge ...

  10. Android 8.0 无法收到broadcast

    参见此页 https://commonsware.com/blog/2017/04/11/android-o-implicit-broadcast-ban.html 目前最简单的方法就是:把targe ...