m***@126.com
m***@126.com
  • 发布:2024-01-31 12:22
  • 更新:2024-02-02 11:10
  • 阅读:200

【报Bug】澎拜OS收起键盘后input不失去焦点,原被键盘在遮挡的控件无法点击[微信小程序原生没有这个问题]

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 3.98

第三方开发者工具版本号: 1.06.2401020

基础库版本号: 3.0.2

项目创建方式: HBuilderX

App下载地址或H5⽹址: hello-uniapp

示例代码:
<template>  
    <view class="container">  
        <input placeholder="这是一个输入框" />  
        <button type="primary" @click="handleClick">点击我</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    onLoad() {  
        // 监听键盘高度变化  
        uni.onKeyboardHeightChange((res) => {  
            console.log(res.height);  
            uni.showToast({  
                title: '键盘高度变化:' + res.height,  
                icon: 'none'  
            });  
        });  
    },  
    methods: {  
        handleClick() {  
            // 获取当前毫秒时间戳  
            let timestamp = Date.parse(new Date());  
            console.log(timestamp);  
            uni.showToast({  
                title: '点击成功' + timestamp,  
                icon: 'none'  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  
.container {  
    margin: 20rpx;  
    height: 90vh;  
    padding: 20rpx;  
    box-sizing: border-box;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  
</style>

操作步骤:
<template>  
    <view class="container">  
        <input placeholder="这是一个输入框" />  
        <button type="primary" @click="handleClick">点击我</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    onLoad() {  
        // 监听键盘高度变化  
        uni.onKeyboardHeightChange((res) => {  
            console.log(res.height);  
            uni.showToast({  
                title: '键盘高度变化:' + res.height,  
                icon: 'none'  
            });  
        });  
    },  
    methods: {  
        handleClick() {  
            // 获取当前毫秒时间戳  
            let timestamp = Date.parse(new Date());  
            console.log(timestamp);  
            uni.showToast({  
                title: '点击成功' + timestamp,  
                icon: 'none'  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  
.container {  
    margin: 20rpx;  
    height: 90vh;  
    padding: 20rpx;  
    box-sizing: border-box;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  
</style>

预期结果:
<template>  
    <view class="container">  
        <input placeholder="这是一个输入框" />  
        <button type="primary" @click="handleClick">点击我</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    onLoad() {  
        // 监听键盘高度变化  
        uni.onKeyboardHeightChange((res) => {  
            console.log(res.height);  
            uni.showToast({  
                title: '键盘高度变化:' + res.height,  
                icon: 'none'  
            });  
        });  
    },  
    methods: {  
        handleClick() {  
            // 获取当前毫秒时间戳  
            let timestamp = Date.parse(new Date());  
            console.log(timestamp);  
            uni.showToast({  
                title: '点击成功' + timestamp,  
                icon: 'none'  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  
.container {  
    margin: 20rpx;  
    height: 90vh;  
    padding: 20rpx;  
    box-sizing: border-box;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  
</style>

实际结果:
<template>  
    <view class="container">  
        <input placeholder="这是一个输入框" />  
        <button type="primary" @click="handleClick">点击我</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    onLoad() {  
        // 监听键盘高度变化  
        uni.onKeyboardHeightChange((res) => {  
            console.log(res.height);  
            uni.showToast({  
                title: '键盘高度变化:' + res.height,  
                icon: 'none'  
            });  
        });  
    },  
    methods: {  
        handleClick() {  
            // 获取当前毫秒时间戳  
            let timestamp = Date.parse(new Date());  
            console.log(timestamp);  
            uni.showToast({  
                title: '点击成功' + timestamp,  
                icon: 'none'  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  
.container {  
    margin: 20rpx;  
    height: 90vh;  
    padding: 20rpx;  
    box-sizing: border-box;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  
</style>

bug描述:

红米K60至尊版,澎拜OS1.0.5.0,在由uniapp开发的小程序中,点击input框输入文字,点击收起键盘后input无法失去焦点,且键盘高度监听事件不触发(高度为0),导致原来被键盘遮挡的部分所有控件均无法操作!!!

hello uni-app小程序也有这个问题,几乎是通病。

2024-01-31 12:22 负责人:无 分享
已邀请:
JXWang

JXWang

我用相同的代码在 澎湃os 1.0.29.0 上无法复现这个问题,要不您升级一下系统试试

  • m***@126.com (作者)

    ok了 升级就ok了 谢谢

    2024-02-07 14:22

要回复问题请先登录注册