uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱

一.问题如下

最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图

二.解决方法

1.让其在输入框获取焦点时隐藏

百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去在让按钮显示出来,但是这样写每个输入框都得加两个得到焦点和失去焦点的事件.而且如果你把软键盘放下,按钮不会出来.所以这个方法pass掉.

网上的方法很多,但是都不是我想要的效果.

2.将 bottom 改成 top

最后我的方法是把 固定定位的bottom改成了top,因为用的rpx适配,所以如果用top:600rpx这种方法,可能显示不是很完美,所以我在onReady的时候获取屏幕的高度,在进行按钮高度的设置.代码如下:

    <!--    注册确认按钮-->
    <button @click="submit" class="reg-btn" :style="{top:regLocation}" plain>确认</button>

//注册确定按钮样式
.reg-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 592rpx;
  height: 108rpx;
  background: #4747FB;
  border: none;
  border-radius: 58rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #FFFFFF;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

	onReady() {
      try {
        // 根据屏幕高度设置 top 值
        this.regLocation = res.windowHeight - 118 + 'px' // 此处的 118 是我的按钮离底部的距离加上按钮的高度
      } catch (e) {
        // error
        uni.$u.toast(e)
      }
	}

最后效果图如下:

此时软键盘弹起就不会把按钮往上挤了,而且定位也是我想要的位置

补充:

最近写项目发现,这种调用接口获取屏幕高度有点麻烦了.实际上我们可以直接设置top定位

  position: absolute;
  width: 90%;
  top: calc(100% - 152rpx);

这样很好的解决了这个问题,而且代码也简单,就主要设置 calc 来控制距离底部的距离. 

 3.补充 app 的解决方法

https://uniapp.dcloud.io/component/input?id=input

这个方法是针对app的解决方法

"app-plus": {
	"softinputMode": "adjustPan"
}