微信小程序输入框键盘弹出使得布局上移问题

input输入框这一模块使用position:fixed固定在页面底部，通过adjust-position的值来控制键盘弹起时是否自动上推页面，通过bindfocus来获取键盘高度，使input输入框聚焦时跟随键盘上移而不被遮挡，输入框失去焦点时触发bindblur事件，输入框恢复原位。

参考代码：

wxml文件：

发送

wxss文件：

/*输入框*/

.input{

position: fixed;

left: 0;

right: 0;

height: 90rpx;

}

.input input{

background: #f1f1f1;

height: 80rpx;

padding:10rpx 20rpx;

font-size: 34rpx;

width:77%;

}

.area{

width: 100%;

height: 90rpx;

position: relative;

overflow: hidden;

}

.input .button{

width:20%;

position: absolute;

background:#42c97f;

height: 90rpx;

line-height: 87rpx;

text-align: center;

font-size: 34rpx;

color: #fff;

right:0;

top:0;

bottom:0;

}

js文件：

//输入聚焦

foucus: function (e) {

var that = this;

that.setData({

bottom: e.detail.height

})

},

 

//失去聚焦

blur:function(e){

var that = this;

that.setData({

bottom: 0

})

}