小程序Input 輸入框聚焦時上推頁面

小程序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
  })
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 小程序 基本知識 項目文件 JSON 配置 小程序配置 app.json app.json 是對當(dāng)前小程序的全局配...
    勇敢的_心_閱讀 1,494評論 0 6
  • create by jsliang on 2018-9-17 17:58:56 Recently revised...
    梁_飄閱讀 1,678評論 0 6
  • 本文轉(zhuǎn)載自wuwhs的segmentfault專欄 最近一段時間在做 H5 聊天項目,踩過其中一大坑:輸入框獲取焦...
    兔子不打地鼠打代碼閱讀 10,775評論 1 12
  • 關(guān)于孩子的日記是好久都沒有寫了,還真不知道從何寫起。曾經(jīng)從她出生的那天起哪怕是流水賬日記都在寫。 ...
    還沒展翅的海鷗閱讀 362評論 0 1
  • 五個發(fā)展心理學(xué)理論,條條大道通羅馬,就我自己喜歡的風(fēng)格而言,我偏向于人本主義的心理發(fā)展觀! 原因:1人性至...
    向日葵cat9閱讀 181評論 0 0

友情鏈接更多精彩內(nèi)容