最近提测后,发现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. Python高级笔记(五)--实例方法、静态方法和类方法

    1. 类属性.实例属性 类属性在内存中只保存一份 实例属性在每个对象中都要保持一份 obj.__class__.country="xxx": 可以修改类属性 2. 实例方法.静态方 ...

  2. <HTML> 模块

    一些元素 <q>元素 用于引用, quote 浏览器一般会负责加上双引号,但是不是所有的浏览器都会在<q>元素的内容两边加双引号. <blockquote>元素 用 ...

  3. js关于“变量提升、作用域、私有作用域等知识点”高级解题思路

    var i = 2,    x = 5;var fn = function (x) {    x += 3;    return function (y) {        console.log(( ...

  4. apply,all,bind的区别

    这三个都是用来改变this指向的 call() 和apply()的第一个参数相同,就是指定的对象.这个对象就是该函数的执行上下文.call()和apply()的区别就在于,两者接收的参数不一样.cal ...

  5. 浏览器将URL变成一个屏幕上显示的网页的过程?

    前言 一个浏览器是怎么工作的? 正文 URL变网页过程: 1.浏览器通过http或https协议,向服务端请求页面 2.将请求过来的HEML代码通过解析,构建DOM树 3.计算DOM树上的CSS属性 ...

  6. MyRolan (快速启动小工具)

    类似 Rolan的快速启动工具. 启动后隐藏,当鼠标移至左上角时,窗口显示,点击项目可运行程序. GitHub地址: MyRolan . #if defined(UNICODE) && ...

  7. js较深入的知识点

    浏览器渲染过程是怎样的?重绘重排是什么?如何避免过多的重绘重排? 将html解析为dom树; 将css解析为cssom; 结合DOM树和CSSOM树,生成一棵渲染树(Render Tree); 生成布 ...

  8. Jmeter、Postman 、 loadrunner SoapUI 接口测试工具

    一. loadrunner  简称 LR 二. Jmeter 1.安装包:apache-jmeter-4.0.tgz   解压.学会此工具的使用  和POSTman 一样的. 2.本机测试:双击apa ...

  9. sql的四种匹配模式

    1. % 表示任意0个或多个字符.如下语句:Select * FROM user Where name LIKE '%三%'; 将会把name为“张三”,“三脚猫”,“唐三藏”等等有“三”的全找出来. ...

  10. nodejs的package.json依赖dependencies中 ^ 和 ~ 的区别

    nodejs的package.json定义了一个模块,包括其依赖关系的一个简单的JSON文件,该文件可以包含多个不同的指令来告诉Node包管理器如何处理模块. dependencies则表示此模块依赖 ...