###
uniapp 中点击输入框时软键盘弹出导致输入框被覆盖的解决方案
#### 一、问题描述
在uni
-app 开发过程中，当用户点击输入框时，软键盘会自动弹出。然而，在某些设备上（尤其是
安卓），软键盘可能会遮挡输入框，影响用户体验[^2]。
#### 二、解决方案概述
为了确保输入框不会被软键盘遮挡，可以采用监听软键盘事件并动态调整页面布局的方法来解决问题。具体来说，通过监听 `onKeyboardHeightChange` 事件
获取当前软键盘的高度，并据此调整页面元素的位置或容器滚动条位置。
#### 三、技术细节说明
##### （一）使用 onKeyboardHeightChange API
获取键盘高度
对于支持此API 的平台（如
微信小程序），可以直接利用该接口实时监测键盘状态变化：
```javascript
// 监听键盘高度改变事件
this.$scope.onKeyboardHeightChange = function
(res
) {
console.log
(`keyboard height is ${res.height}px`
);
};
```
##### （二）针对不同环境下的处理方式
###### 1.
微信小程序环境下
由于微信
提供了专门用于检测键盘显示隐藏以及高度变动的通知机制，因此可以通过设置页面根节点样式中的 padding
-bottom 属性值等于键盘高度加上一定安全间距的方式防止输入区域被遮挡[^1]。
```css
/* 设置页面主体部分 */
.page
-body {
/* ...其他样式 */
}
/* 当键盘弹出时应用额外padding */
.keyboard
-show .page
-body{
padding
-bottom: var
(--keyboard
-height,0px
);
}
```
同时配合 JavaScript 控制类名切换:
```javascript
let keyboardShowClass = 'keyboard
-show';
if
(res.show
){
this.setData
({
[`classList[${index}]`]: `${classList} ${keyboardShowClass}`
}
);
}else{
this.setData
({
[`classList[${index}]`].replace
(keyboardShowClass,''
)
}
)
}
```
###### 2.
H5 环境下
考虑到浏览器间存在差异性较大，建议采取更通用的
做法——即监听页面可见范围大小的变化情况作为判断依据之一；另外还需注意 iOS 设备可能存在 position:fixed 布局异常的情况[^3]。
可以在 input 组件外层包裹一层可滚动视窗，并为其绑定 scroll 事件处理器以便及时响应因键盘升起而引起的可视区缩小现象：
```html
<template>
<div class="scroll
-wr
apper">
<!
-- 表单内容
-->
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const wr
apperRef = ref
(null
);
function handleScroll
() {
// 更新表单项位置逻辑...
}
wr
apperRef.value.addEventListener
('scroll',handleScroll
);
</script>
<style scoped>
.scroll
-wr
apper {
overflow
-y:auto;
max
-height: calc
(100vh
- env
(safe
-area
-inset
-top
));
}
</style>
```
此外，还可以尝试给 body 添加特定 CSS 类型以修正固定定位元素随屏幕拉伸错位的问题：
```css
body.keyBoardOpen {
touch
-action:none !important;
overscroll
-behavior
-y:contain !important;
}
```
最后记得调用 field.blur 方法使光标消失从而关闭虚拟键盘[^4]:
```javascript
document.querySelector
('#inputField'
).blur
();
```
#### 四、总结
综上所述，要彻底解决
uniapp 应用中由软键盘引发的一系列兼容性和体验优化方面的问题，需根据不同运行环境分别制定相应的策略。以上方法能够有效改善大多数场景下的表现
效果，但仍需
开发者根据实际情况灵活运用这些技巧来进行针对性调试与改进。
本文详细介绍了如何在uniapp中实现全平台兼容的商品拍照识别功能，包括调用手机摄像头、四方框拖动选择区域以及使用canvas处理图片等步骤。提供了Vue2和Vue3兼容的示例代码，适用于小程序、H5网页、安卓和iOS应用，旨在仿照京东、淘宝的扫描识别效果。
订阅专栏 解锁全文
扫一扫
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
