<template>
<template>
<view class="content">
<view class="text-area">
<input class="input1" @blur="closeKeyborad" @focus="openKeyborad" type="text"
placeholder="请输入年龄">
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// const listener = function (res) {
// console.log('键盘打开了')
// console.log('键盘高度:', res.height)
// uni.showToast({
// title: 'onload listenerKeyboard 键盘高度:' res.height,
// icon: 'none',
// duration: 3000
// })
// }
// uni.onKeyboardHeightChange(listener)
// uni.offKeyboardHeightChange(listener)
},
methods: {
// uni.onKeyboardHeightChange
openKeyborad() {
console.log('uni.onKeyboardHeightChange')
uni.onKeyboardHeightChange(this.listenerKeyboard)
},
// uni.offKeyboardHeightChange
closeKeyborad() {
console.log('uni.offKeyboardHeightChange')
uni.offKeyboardHeightChange(this.listenerKeyboard)
},
listenerKeyboard(res) {
console.log('键盘打开了')
console.log('键盘高度:', res.height)
uni.showToast({
title: 'listenerKeyboard 键盘高度:' res.height,
icon: 'none',
duration: 3000
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
flex-direction: column;
}
.input1 {
width: 400rpx;
border: 2rpx solid #666;
padding: 10rpx 0;
margin: 20rpx 0;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
给input标签分别绑定了@focus和@blur事件,用作打开和收起软键盘,首次点击input时,软键盘弹出,按说这个时候软键盘高度发生变化,uni.onKeyboardHeightChange应该有所响应,实测无效,点击软键盘上的收起按钮后,uni.offKeyboardHeightChange得到调用,
这个是bug吗?还是使用方式问题?
环境:
HbuilderX 3.8.7
Android 8.0 和 Android 13