uni-app 安卓微信小程序textarea输入换行页面被上推 切换到其他input错位

uni-app 安卓微信小程序textarea输入换行页面被上推 切换到其他input错位

产品分类

uniapp/小程序/微信

PC开发环境操作系统

Mac

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

10.15.7

HBuilderX类型

正式

HBuilderX版本号

3.1.4

第三方开发者工具版本号

1.05

基础库版本号

2.16.0

项目创建方式

HBuilderX

示例代码：

<template>  
    <view>  
        <view class="uni-common-mt">  
            <view class="uni-form-item uni-column">  
                <input class="uni-input"  placeholder="input" />  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <input class="uni-input"  placeholder="input"/>  
                <textarea  class="uni-input"    placeholder="textarea"/>  
            </view>  
        </view>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .uni-input{  
        margin: 20rpx;  
        border: 1rpx solid #555555;  
    }  
</style>

操作步骤：

textarea 输入换行，页面往上，点击其他input

预期结果：

页面位置未恢复，input位置恢复，对不上，错位显示

实际结果：

页面位置未恢复，input位置恢复，对不上，错位显示

bug描述：

uniapp 安卓手机textarea 输入多行文本或者回车换行页面被上推，点击切换到其他input, 页面保持上推没有复位，导致input错位。

截图

截图 截图


更多关于uni-app 安卓微信小程序textarea输入换行页面被上推 切换到其他input错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 安卓微信小程序textarea输入换行页面被上推 切换到其他input错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是uni-app在安卓微信小程序中常见的textarea焦点管理问题。当textarea输入换行时，页面会被键盘推起，但切换焦点到其他input时页面未能正确复位。

建议的解决方案：

  1. 使用@focus和@blur事件手动控制页面滚动：
<textarea 
  class="uni-input" 
  placeholder="textarea"
  @focus="onTextareaFocus"
  @blur="onTextareaBlur"
/>
  1. 在methods中添加处理逻辑：
methods: {
  onTextareaFocus() {
    // 记录当前位置
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  },
  onTextareaBlur() {
    // 延时恢复滚动位置
    setTimeout(() => {
      window.scrollTo(0, this.scrollTop);
    }, 100);
  }
}
  1. 或者使用adjust-position属性：
<textarea 
  class="uni-input" 
  placeholder="textarea"
  adjust-position="false"
/>
  1. 考虑在页面配置中设置：
{
  "path": "pages/your-page",
  "style": {
    "app-plus": {
      "softinputMode": "adjustPan"
    }
  }
}
回到顶部