处理ios软键盘弹起和收起时页面滚动问题

背景:

在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移

bug描述:

<必现>iOS:添加主播成功后 页面会定位在节目设置页的最底部

解决过程:

经过google看了一大堆资料,找到了核心原因,就是ios的滚动scroll 效应。

网络上有大量的解决方案是获取当前页面的滚动高度(scrolltop),然后在页面outfocus时,使用window.scroll把页面滚动回去。

但是这个方法会存在很多问题

  1. 由于本身该页面就存在一个底部抽屉组件,scroll回去的时候页面滚动效果非常明显,页面就像重新渲染了一次,抽屉会重新弹起,体验非常差。
  2. outfocus不太稳定,页面上有select和其他输入的时候,弹起选择框,也会触发onfocus,整个页面就乱滚

核心问题其实是底下的主内容在乱动,所以把它固定住不要让他滚动就好了,所以最后还是选择在底部弹窗出现的时候把整个页面fixed固定住,阻止整个内容滚动。

  1. 获取弹窗出现是页面的scrolltop
  2. 弹窗出现时设置style:position:fixed; top:-scrollTop;
  3. 弹窗消失时,恢复原本的页面定位,并用window.scroll(0, scrollTop)恢复到原先页面的位置。

iOSAndroid软键盘弹起/收起的不同形式:

IOS 上,

输入框(inputtextarea 或 富文本)获取焦点,软键盘弹起,页面(webview)并没有被压缩,或者说高度(height)没有改变,只是页面(webview)整体往上滚了,且最大滚动高度(scrollTop)为软键盘高度。

触发软键盘上的“收起/完成”按钮键盘或者输入框以外的页面区域时,输入框失去焦点,软键盘收起。注意:页面依然是键盘弹起时scroll到的位置。

Android上,

输入框获取焦点,键盘弹起,但是页面(webview)高度会发生改变,一般来说,高度为可视区高度(原高度减去软键盘高度),除了因为页面内容被撑开可以产生滚动,webview本身不能滚动。

触发输入框以外的区域时,输入框失去焦点,软键盘收起。但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。页面恢复正常。

处理ios软键盘弹起和收起时页面滚动问题相关推荐

  1. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...

  2. H5 (React) 移动端监听软键盘弹起、收起

    前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...

  3. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...

  4. h5(移动端) 监听软键盘弹起、收起

    https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...

  5. 小程序ios软键盘弹起挡住input输入框

    这是再写一个项目时偶然发现的一个小bug 要求我在点开页面的时候自动弹起键盘,我使用了input组件内的cursor-spacing属性,但是发现在ios上会出现错位的bug,后面我就使用了onKey ...

  6. h5 ios中软键盘弹起后 fixed定位失效

    position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...

  7. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  8. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...

  9. 软键盘弹起,导致底部被顶上去

    计算出可视界面的高度,当软键盘弹起时让底部元素隐藏掉, 当键盘收起时再让它显示,实在没办法时这种方法也不失为一种方法 1 var h=document.documentElement.clientHe ...

最新文章

  1. 浏览器会缓存js文件
  2. RHEL7 timedatectl命令
  3. python udp 传输文件_python网络编程:UDP方式传输数据
  4. python tensorflow教程推荐_TensorFlow教程和文章推荐大全 -DZone AI
  5. 25个优秀的Ajax技术和实例
  6. js代码自动排版_接口测试平台代码实现9:菜单常显
  7. qgraphicsitem 复制副本_删除/删除/替换QGraphicsTextItem中的选定文本
  8. Centos7利用fpm制作rpm包(fpm安装及使用)
  9. 统一配置管理工具confd
  10. 软件技术基础复习提纲
  11. 为什么谐振时电抗为0_108kVA/108kV/27kV变频串联谐振试验装置
  12. csdn下载分获取方法
  13. Java工具集-数学(圆柱体,椎体工具类)
  14. Docker Swarm集群实践——部署篇
  15. 360漏洞修复出现网管版 将探路企业级市场?
  16. linux搭建pptpd服务器,最简单的Linux系统上的pptpd服务器安装
  17. 研究生导师的“难言之隐”
  18. 【Serverless】【认证服务】接入谷歌账号登录时提示错误码10
  19. python中单引号,双引号,三引号的区别
  20. linux下的ld命令(1)

热门文章

  1. 计算机之父——约翰·冯·诺依曼(现代计算机之父”、“博弈论之父”)
  2. 数据结构—— 构造散列函数的六种方法【直接定址法-数字分析法-平方取中法-折叠法-除留余数法-随机数法】
  3. [ZT]把IM做成避风塘
  4. depth peel_10个jQuery Page Peel插件
  5. HTML第二天学习笔记
  6. yyk冷热启动耗时.bat
  7. 可以用python实现一些小发明_【kimol君的无聊小发明】—用python写图片格式批量处理工具...
  8. android初学者_初学者:如何在Android设备上的打开的应用程序之间切换
  9. 太注重结果,可能就真的会发生“目的性颤抖”
  10. 树莓派新手使用iobroker日志三(米家全家桶加入iobroker)