html52.com
我爱小程序-开发者交流社区

华为P9手机出现键盘挡住输入框的问题

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信安卓客户端 8.0.1 2.9.5

首次进入小程序,点击输入框,会出现键盘挡住输入框的情况!!!

经过排查,是因为首次进入小程序,获取焦点事件在获取键盘高度之前,导致拿不到键盘高度,于是输入框被键盘遮挡了,但是第二次点击输入框的时候,获取键盘高度事件在获取焦点事件之前,这个时候能先拿到键盘高度于是不被遮挡了。

大部分手机能正常,都是先获取键盘高度后获取焦点,目前只发现华为P9手机首次进入小程序是先获取焦点后获取键盘高度导致出现键盘遮挡输入框问题,希望能解决一下。

代码片段如下:

// js
Page({
  data: {
    focus: false,
    kbHeight: '0px'
  },
  onLoad() {
    this.kh = 0;
  },
  bindfocus(e) {
    console.log('===bindfocus', e.detail.height);
    this.setData({
      focus: true,
      kbHeight: `${(e.detail.height || this.kb) + 50}px`
    });
  },
  bindkeyboardheightchange(e) {
    console.log('===bindkeyboardheightchange', e.detail.height);
    this.kh = e.detail.height;
  },
  bindblur() {
    this.kb = 0;
    this.setData({
      focus: false
    });
  }
})

// wxml
<view class="page-body">
  <textarea
  id="id_text"
  class="text"
  bindfocus="bindfocus"
  bindblur="bindblur"
  bindkeyboardheightchange="bindkeyboardheightchange"
  focus="{{focus}}"
  adjust-position="{{false}}"
  style="bottom: {{kbHeight}}"
  placeholder="这里是输入框"
  ></textarea>
</view>

// wxss
page {
  position: relative;
  width: 100%;
  height: 100%;
}
.text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: greenyellow;
  font-size: 30rpx;
  color: red;
}

网友回复

哈罗哈皮:

好家伙,都P50了还在用P9

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付