uni-app textarea文本域将auto-height="true"时点击键盘换行符会出现文字闪动的情况，麻烦尽快修复

uni-app textarea文本域将auto-height="true"时点击键盘换行符会出现文字闪动的情况，麻烦尽快修复

开发环境 版本号 项目创建方式
Windows Windows 10家庭中文版 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.1.18

手机系统：
Android

手机系统版本号：
Android 10

手机厂商：
小米

手机机型：
MIX3

页面类型：
vue

打包方式：
云端

示例代码：

<textarea @input="input" maxlength="140" :auto-height="true" placeholder="请详细描述一下您要发布的信息...(400字以内)" style="min-height: 400rpx; width: 100%;" />

操作步骤：

<textarea @input="input" maxlength="140" :auto-height="true" placeholder="请详细描述一下您要发布的信息...(400字以内)" style="min-height: 400rpx; width: 100%;" />

预期结果：

希望自动增高加上之后输入换行符不闪动

实际结果：

自动增高加上之后输入换行符闪动

bug描述：

textarea文本域加上自动增高之后键盘输入换行符，文本域中的文字会闪动


更多关于uni-app textarea文本域将auto-height="true"时点击键盘换行符会出现文字闪动的情况，麻烦尽快修复的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

问题复现，后续考虑优化，已加分，感谢您的反馈！

更多关于uni-app textarea文本域将auto-height="true"时点击键盘换行符会出现文字闪动的情况，麻烦尽快修复的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好像textarea 设置auto-height 为true 时.设置textarea默认高度,点击中下方无法获取焦点,必须点击textarea顶部.(遇到过,具体还有待测试)

回复 DCMarvel: 问题已确认，后续优化

这个问题希望优化一下，闪动的情况会给用户一种比较low的感觉

HBuilder X 3.1.22 已修复

这是一个已知的 uni-app textarea 组件在 Android 端的渲染问题。当设置 auto-height="true" 时，组件需要动态计算并调整高度，这会导致在换行时出现短暂的布局重绘，表现为文字闪动。

目前可行的解决方案：

  1. 使用 fixed 定位：将 textarea 设置为固定定位，避免布局重排
textarea {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
  1. 手动控制高度：移除 auto-height，通过 @input 事件手动计算并设置高度
<textarea 
  [@input](/user/input)="onInput" 
  :style="{height: textareaHeight + 'px'}"
/>

onInput(event) {
  // 根据行数计算高度
  this.textareaHeight = Math.max(100, event.detail.lineCount * 20);
}
回到顶部