安卓Android系统,H5页面键盘弹出后,页面挤压变形或者底部输入框被遮挡的解决办法

键盘弹出挤压页面至变形

如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压;
在这里插入图片描述在这里插入图片描述
解决方法

  1. 页面加载后获取视图高度为height,
  2. 监听window.onresize,指定容器高度为height
    存在的问题: 偶尔会出现input框获取焦点后,被键盘覆盖,但是在输入内容后滚动到可视区域的现象

底部的输入框获焦后,被键盘覆盖,无法看到输入内容

可以使用scrollIntoViewIfNeeded()方法
scrollIntoView和scrollIntoViewIfNeeded的区别:

  • 前者是滚动到可视区域,可以通过传入参数true(元素顶部与可视区域对齐)和false(元素底部和可视区域对齐), 也可以传入一个对象参数,block属性是start和end(分别对应true和false的效果), behavior属性是滚动动画控制,auto, instant, smooth
  • 后者是,如果元素完全在可视区域则不会有操作,否则才会滚动到可视区域,也可以传入布尔类型的参数,默认是true,元素在可视区域居中对齐。false则是底部或顶部(就近原则处理)
发布了66 篇原创文章 · 获赞 13 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/haoyanyu_/article/details/98762306