收藏
回答

华为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;
}
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容