软键盘弹出的时候，如何让我的页面自动向上移动

Posted 2023-03-23

软键盘弹出的时候，如何让我的页面自动向上移动，否则软键盘挡住了我的输入框。

参考技术A 我觉得你可以试试将整个grid的margin设置为top是负的，textbox失去焦点时再把margin改回来 参考技术B 补充一下 这些个textbox是在popup中的 ，如果是在页面的话，我尝试了页面整个会自动上移，可是popup不会自动上移

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

参考技术A

在做移动端h5页面时，因为遇到了安卓端软键盘会导致页面压缩变形的问题，经过查阅与思考，终于解决问题，以下为解决过程。

演示地址： demo

安卓端： 安卓中，如果将 footer元素 设置为 position:fixed 或 absolute ，因为软键盘会改变页面的高度（将页面顶上来），因此 footer元素 也跟着移动上来，导致页面变形；

IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。

安卓端解决input键盘弹出导致页面压缩变形的方法为：

方法1：将元素设置成 static 或者 relative ，不要脱离文档流。

因为使用 fixed 或者 absolute ，会使得元素跟随 body 的底部移动，而安卓端软键盘将导致 body 高度变小而导致变形。

方法2：若想设置成 absolute ，则可以通过js固定其父级元素（如 body 或者 父级div ）的高度

例如1： 设置元素高度时以 px 为单位设置，不要以 % 或 vh 为单位

例如2： 写个监听resize事件（浏览器窗口大小调整时触发）

当键盘弹出的时候，固定 body 高度不变。

注：不要设置成 fixed