在uni-app textarea组件中键盘弹起页面时常出现空白

在uni-app textarea组件中键盘弹起页面时常出现空白

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 10

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：iOS

手机系统版本号：iOS 26

手机厂商：苹果

手机机型：iphone 13

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

页面设置

```javascript
"app-plus" : {  
     "titleNView" : false,  
     "softinputMode" : "adjustResize", // 重点，设置成adjustPan是没问题的  
     "bounce" : "none"  
}

设置全局背景色：background-color: aqua;，在textarea组件中，重复操作获取焦点，失去焦点

预期结果：

全局样式不变

实际结果：

全局样式消失，颜色变成空白

bug描述：

页面设置了

"app-plus" : {  
     "titleNView" : false,  
     "softinputMode" : "adjustResize", // 重点，设置成adjustPan是没问题的  
     "bounce" : "none"  
}

在textarea组件中，点击获取焦点时，就会出现一个空白的页面，我设置样式

<style>  
    page {  
        background-color: aqua;  
    }  
</style>

也看不到背景色 如果没有出现请重复操作获取焦点，失去焦点


更多关于在uni-app textarea组件中键盘弹起页面时常出现空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于在uni-app textarea组件中键盘弹起页面时常出现空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在iOS设备上常见的软键盘弹起导致的页面布局问题。当softinputMode设置为adjustResize时，键盘弹起会触发页面重新调整尺寸，可能引起页面渲染异常。

解决方案：

  1. 检查页面结构：确保页面根元素具有正确的样式继承，避免使用可能导致布局塌陷的CSS属性。

  2. 使用adjustPan模式：如你所述，切换到adjustPan可以避免此问题，但会失去键盘弹起时自动调整输入框位置的功能。

  3. 添加固定背景样式：在page或最外层容器上添加以下样式：

page {
  background-color: aqua;
  min-height: 100vh;
  height: auto;
}
  1. 监听键盘事件：通过uni.onKeyboardHeightChange监听键盘高度变化，在回调中强制重绘页面：
uni.onKeyboardHeightChange(res => {
  // 触发页面更新
  this.$forceUpdate();
});
回到顶部