小程序部分安卓机里输入框input被输入法遮挡问题

最新推荐文章于 2025-06-22 20:56:09 发布

昌子玩前端

最新推荐文章于 2025-06-22 20:56:09 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_38047955/article/details/88125069

小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了解决小程序中输入框与输入法不兼容问题的方法，通过调整属性和监听事件，使输入框在不同安卓机型上的显示更加稳定。实现思路包括禁用页面上推、动态调整输入框位置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于小程序输入法跟输入框官方文档有给出过解决办法 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
  })
},

实现效果：