小程序 input(输入框) 固定在底部 获取焦点 上推页面

使用fixed定位将input固定在屏幕底部，同时为了不让页面整体上移，需要将input的adjust-position属性设为false。

只是，这么做的话会导致底部的输入框也无法上移。 从而被拉起的小键盘盖住。

从官方社区整理来一个方法，能够在小键盘拉起的同时将底部的input框顶起，同时适配大部分机型。

 

 

wxml

<view class='pocket_input' style='bottom:{{height}}px;' wx:if="{{inputShow}}" >

<input type='text' placeholder-style='input-placeholder' cursor='{{cursor_position}}' class='input_style' placeholder='随便说点什么吧~(30字以内哦)' focus='{{focus}}' cursor-spacing="2" adjust-position='{{adjust_position}}' maxlength='30' bindfocus="bindfocus" bindblur="bindblur" bindconfirm="bindconfirm"></input>

</view>

wxss

.pocket_input {

position: fixed;

bottom: 0;

width: 100%;

background-color: white;

overflow: hidden,

}

.input_style{

margin: 12rpx 23rpx;

background-color: #F4F5F6;

font-size: 30rpx;

border-radius: 20rpx;

padding-left: 15rpx;

}

 

.input-placeholder{

margin-left: 25rpx;

}

js

//监听input获得焦点

bindfocus: function(e) {

let that = this;

let height = 0;

let height_02 = 0;

wx.getSystemInfo({

success: function (res) {

height_02 = res.windowHeight;

}

})

 

height = e.detail.height - (app.globalData.height_01 - height_02);

console.log('app is', app.globalData.height_01);

that.setData({

height: height,

})

console.log('获得焦点的 e is', e);

},

//监听input失去焦点

bindblur: function(e) {

this.setData({

height: 0,

inputShow: false,

});

console.log('失去焦点的 e is', e);

},

我的页面效果设计是  

点击讨论  

然后让input获得焦点，

同时动态更改这个放置input的view的bottom属性，

做到input会随着小键盘的拉起， 被顶到小键盘的上方的效果。

 

这里有两点需要注意，第一点就是这个bottom值的获取，在input获得焦点的监听事件里，

e.detail.height  这个属性就是小键盘的拉起高度，获得这个值，然后bottom该值的高度。

只是做到这里你会发现，不同的机型，可能有的正好合适，有的

下方会有大块的留白，尤其IOS这样

 

原因是，

如果用的是小程序里的tarBar的话，（就app.json里配置那种），

此处是会自动加上这个高度的。

所以要把这个高度减去。

input才会随着小键盘拉起被顶到一个刚好合适的位置

方法如下

 

效果诸君亲测吧，有需要改进的地方请在下方留言