微信小程式輸入框鍵盤彈出使得佈局上移問題
input輸入框這一模組使用position:fixed固定在頁面底部，通過adjust-position的值來控制鍵盤彈起時是否自動上推頁面，通過bindfocus來獲取鍵盤高度，使input輸入框聚焦時跟隨鍵盤上移而不被遮擋，輸入框失去焦點時觸發bindblur事件，輸入框恢復原位。
參考程式碼：
wxml檔案：
<view class="input" style="bottom:{{bottom}}px">
<view class="area">
<input value="{{msgContent}}" placeholder='請輸入文字內容' bindconfirm="sendMsgConfirm" bindinput='inputTextChange' adjust-position="{{false}}" bindfocus="foucus" bindblur="blur"></input>
<view class="button" bindtap='sendMsgButton'>傳送</view>
</view>
</view>
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
})
}