键盘弹出挤压页面至变形
如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压;
解决方法
- 页面加载后获取视图高度为height,
- 监听window.onresize,指定容器高度为height
存在的问题: 偶尔会出现input框获取焦点后,被键盘覆盖,但是在输入内容后滚动到可视区域的现象
底部的输入框获焦后,被键盘覆盖,无法看到输入内容
可以使用scrollIntoViewIfNeeded()方法
scrollIntoView和scrollIntoViewIfNeeded的区别:
- 前者是滚动到可视区域,可以通过传入参数true(元素顶部与可视区域对齐)和false(元素底部和可视区域对齐), 也可以传入一个对象参数,block属性是start和end(分别对应true和false的效果), behavior属性是滚动动画控制,auto, instant, smooth
- 后者是,如果元素完全在可视区域则不会有操作,否则才会滚动到可视区域,也可以传入布尔类型的参数,默认是true,元素在可视区域居中对齐。false则是底部或顶部(就近原则处理)