本文主要是介绍uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
具体问题
我是一个全屏的H5页面，高度用的是100vh，全屏 = 页面。
input输入框固定在底部，input聚焦时软键盘弹出，安卓时页面被压缩，变成了全屏 = 页面 + 软键盘，页面就变形了。
ios是整个页面会被往上顶，发生滚动。
解决办法
第一步：解决页面被压缩、往上顶问题
测试发现，当iput框位置高于软键盘弹出的位置时页面不会被挤压、往上顶，而input聚焦的操作先于软键盘弹出，所以当input聚焦时使input的位置高于软键盘弹出位置。
这时如果不做任何操作的话，input框的位置是有问题的，所以与此同时我们要将input框还原到适当位置（看需求）。
goUp: function(){ //获得焦点事件//原来单位为100vh，输入法弹出时100vh的计算方法跟原来的计算方法不一样，会导致页面变形this.$refs.main.$el.style.height = this.initialHeight + 'px';this.$refs.liveOnline.$el.style.height = this.initialHeight + 'px'; this.$refs.dialogbox.$el.style.bottom = this.initialHeight + 'px';//让input框处于高于输入法的位置，可以让页面不被输入法往上顶或压缩setTimeout(() => !this.isFlag && (this.$refs.dialogbox.$el.style.bottom = (this.keyHeight != 0 ? this.keyHeight : this.initialHeight/2) + 'px'),100);//同时让input框处于合适的位置,这个值需要获取到键盘的高度 ps：某些情况获取不到，算个大概}
我的需求是要将input处于软键盘的正上方，所以我需要获取到软键盘的高度。
第二步：安卓软键盘高度可以通过监听页面高度变化来获取
页面初始化的时页面高度为initialHeight = window.innerHeight，当input聚焦后，软键盘弹起页面高度为window.innerHeight，可得软键盘高度为keyHeight = initialHeight - window.innerHeight。
这里有一个问题就是由于input输入框聚焦时执行的事件比页面发生高度变化执行的事件要先，所以第一次input输入框聚焦时keyHeight还未被赋予软键盘的高度 。
我想了一个解决办就是监听keyHeight的改变，当keyHeight改变时设置input的位置，并且设置了一个参数isFlag（初始值为true），来控制第一次input聚焦时不设置input的位置。
uni.onWindowResize((res) => {if(this.initialHeight != window.innerHeight && this.isFlag){this.keyHeight = this.initialHeight - window.innerHeight;this.isFlag = false;}
})keyHeight:function(value){this.$refs.dialogbox.$el.style.bottom = this.keyHeight + 'px'}
ps: ios端监听不到页面高度变化暂时没找到合适的方法来获取软键盘高度。虽然ios可以监听页面滚动，软键盘弹起页面发生滚动，获取页面滚动的距离就是软键盘的高度，再将页面滚动距离归为0，但是归为0时页面会出现白色的抖动。
遂放弃了这种方法，经与产品商议，ios端就让软键盘将页面顶起。
onPageScroll: function(Object) {//获取页面滚动的距离this.keyHeight = Object.scrollTop();//将页面滚动距离归为0uni.pageScrollTo({scrollTop:0,duration: 0})}
第三步：软键盘收起时页面还原
监听input失焦事件将将input位置还原、取消蒙层显示。
因为有的时候会出现软键盘收起页面上滑的页面未还原的bug，所以input失焦时将页面上滑距离归为0。
goDown: function(){//失焦事件setTimeout(() => {//延时是为了处理点击发送按钮失焦的情况this.$refs.dialogbox.$el.style.bottom = 0;this.isDialogBoxUp = false;uni.pageScrollTo({scrollTop:0,duration: 0})},100)}
这篇关于uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
