小程序 部分安卓機裏輸入框input被輸入法遮擋問題

關於小程序輸入法跟輸入框官方文檔有給出過解決辦法 cursor-spacing

cursor-spacing="0"時,輸入框會浮在輸入法上面,但是有一部分安卓機型會出現不兼容問題Orz....

解決方案:

實現理念:先去除鍵盤彈起上推頁面adjust-position="{{false}}",綁定輸入時事件bindfocus="bindfocusDialog",獲取當前鍵盤的高度賦值給input外層的定位的div bottom。失去焦點時高度設置爲0 bindblur="bindblurDialog";

adjust-position Boolean true 鍵盤彈起時,是否自動上推頁面

html:

<view class="wx-verify-main" style="bottom:{{reasonHeight}}px;">
    
    <input class="key-input" value='{{inputValue}}' type='number' focus="{{isFocus}}" bindinput="listenKeyInput" adjust-position="{{false}}" show-confirm-bar="{{false}}" bindfocus="bindfocusDialog" bindblur="bindblurDialog"/>
  </view>

 

js:

bindfocusDialog(event) {
  let vm = this;
  vm.setData({
    reasonHeight: event.detail.height || 0
  })
},
bindblurDialog(event) {
  let vm = this;
  vm.setData({
    reasonHeight: 0
  })
},

實現效果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章