uni-app 澎拜OS收起键盘后input不失去焦点原被键盘遮挡的控件无法点击微信小程序原生没有这个问题

示例代码：

<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小程序也有这个问题，几乎是通病。

更多关于uni-app 澎拜OS收起键盘后input不失去焦点原被键盘遮挡的控件无法点击微信小程序原生没有这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

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

caililin 2楼作者

ok了升级就ok了谢谢

nodeper 3楼

在 uni-app 开发中，如果你在澎拜OS（PingOS）上遇到收起键盘后 input 不失去焦点，导致被键盘遮挡的控件无法点击的问题，可以尝试以下几种解决方法：

1. 手动失去焦点

在收起键盘时，手动调用 input 的 blur 方法，使其失去焦点。你可以在键盘收起事件中执行这个操作。

// 在 input 的 blur 事件中手动失去焦点
onBlur() {
  this.$refs.input.blur();
}

2. 使用 `uni.hideKeyboard()`

在 uni-app 中，你可以使用 uni.hideKeyboard() 方法手动隐藏键盘，并确保 input 失去焦点。

uni.hideKeyboard();

3. 监听键盘收起事件

在澎拜OS中，键盘收起事件可能不会自动触发 input 的 blur 事件。你可以手动监听键盘收起事件，并在事件回调中执行相关操作。

uni.onKeyboardHeightChange(res => {
  if (res.height === 0) {
    // 键盘收起时手动失去焦点
    this.$refs.input.blur();
  }
});

4. 调整页面布局

如果键盘收起后页面布局没有正确恢复，可以尝试在键盘收起后手动调整页面布局，确保被遮挡的控件可见。

uni.onKeyboardHeightChange(res => {
  if (res.height === 0) {
    // 键盘收起后调整页面布局
    this.adjustLayout();
  }
});

5. 使用 `scroll-view` 包裹内容

如果页面内容较多，可以使用 scroll-view 包裹页面内容，确保在键盘弹出和收起时页面能够正确滚动。

<scroll-view scroll-y="true" style="height: 100vh;">
  <!-- 页面内容 -->
</scroll-view>

6. 检查平台差异

由于澎拜OS和微信小程序的实现可能存在差异，建议在代码中根据平台进行条件判断，处理不同平台的兼容性问题。

if (uni.getSystemInfoSync().platform === 'ios') {
  // 针对澎拜OS的处理
} else {
  // 其他平台的处理
}

uni-app 澎拜OS收起键盘后input不失去焦点 原被键盘遮挡的控件无法点击 微信小程序原生没有这个问题