小程序input輸入框最開始位于頁面底部,聚焦是鍵盤彈起,上推頁面
input輸入框這一模塊使用position:fixed固定在頁面底部,通過adjust-position的值來控制鍵盤彈起時是否自動上推頁面,通過bindfocus來獲取鍵盤高度,使input輸入框聚焦時跟隨鍵盤上移而不被遮擋,輸入框失去焦點時觸發(fā)bindblur事件,輸入框恢復(fù)原位。
wxml部分:
<view class='mask' catchtouchmove='true'>
<view class='empty' style="bottom:{{bottom}}px">
<view class='inputarea'>
<textarea auto-focus adjust-position="{{false}}" bindfocus="foucus" bindblur="blur"></textarea>
</view>
</view>
</view>
wxss部分
.mask {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
top: 0;
}
.empty {
width: 100%;
position: fixed;
left: 0;
right: 0;
}
.inputarea {
height: 300rpx;
background: #fff;
position: relative;
}
js部分
data: {
bottom: 0
}
//輸入聚焦
foucus: function (e) {
var that = this;
that.setData({
bottom: e.detail.height
})
},
//失去聚焦
blur:function(e){
var that = this;
that.setData({
bottom: 0
})
}