首次进入小程序,点击输入框,会出现键盘挡住输入框的情况!!!
经过排查,是因为首次进入小程序,获取焦点事件在获取键盘高度之前,导致拿不到键盘高度,于是输入框被键盘遮挡了,但是第二次点击输入框的时候,获取键盘高度事件在获取焦点事件之前,这个时候能先拿到键盘高度于是不被遮挡了。
大部分手机能正常,都是先获取键盘高度后获取焦点,目前只发现华为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;
}
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
好家伙,都P50了还在用P9