小程序Input 输入框聚焦时上推页面

小程序input输入框最开始位于页面底部,聚焦是键盘弹起,上推页面
input输入框这一模块使用position:fixed固定在页面底部,通过adjust-position的值来控制键盘弹起时是否自动上推页面,通过bindfocus来获取键盘高度,使input输入框聚焦时跟随键盘上移而不被遮挡,输入框失去焦点时触发bindblur事件,输入框恢复原位。
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
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容