小程序 部分安卓机里输入框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
  })
},

实现效果:

posted @ 2023-03-16 20:42  昌子玩前端  阅读(276)  评论(0)    收藏  举报  来源