uni-app textarea 组件设置了auto-height靠右侧对齐直接粘贴一长串文本最右侧列文本无法完全显示只有在真机上会出现这个问题

uni-app textarea 组件设置了auto-height靠右侧对齐直接粘贴一长串文本最右侧列文本无法完全显示只有在真机上会出现这个问题

产品分类

  • uniapp/小程序/微信

PC开发环境操作系统

  • Windows

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

  • 22631.5472

HBuilderX类型

  • 正式

HBuilderX版本号

  • 4.29

第三方开发者工具版本号

  • Stable 1.06.2412050

基础库版本号

  • 3.8.11

项目创建方式

  • HBuilderX

示例代码

<template>  
  <view class="cell-box">  
    <view class="cell-title">备注</view>  
    <view class="cell-field">  
      <textarea  
        placeholder="请输入备注"  
        placeholder-style="color: #B0B3BC;"  
        maxlength="200"  
        auto-height  
      >

操作步骤

聚焦后直接粘贴超长文本
文本示例：

饮用建议  
纯饮：可感受烧酒原始风味，25% vol 左右的烧酒，室温或稍加冷藏后饮用，口感佳。如萨摩烧酒神之之湧大麦烧酒，纯饮能体会其醇厚口感。  
加冰：在酒中加入冰块，降低温度，稀释酒液，减轻酒精刺激感，让风味更清爽。如黑雾岛本格甘薯烧酒，说明书推荐加冰饮用。  
加水：加适量冰水或热水冲兑，热水（oyuwari）能提升香气，冰水可让口感更柔和。如壱岐っ娘本格焼酎，不同水温冲兑有不同风味。  
调制鸡尾酒

预期结果

  • 文本内容完整展示

实际结果

  • 最右侧文字无法完全展示

bug描述

textarea 组件设置了auto-height，靠右侧对齐。直接粘贴一长串文本，最右侧列文本无法完全显示。只有在真机上会出现这个问题。

基础库版本：3.8.11

微信版本：8.0.61

机型：iPhone 16 Pro Max ios版本18.5

二编：
经试验：1. 样式改成靠左侧对齐 2. 安卓机型 3.使用微信小程序原生写法运行到ios机型，展示和输入都正常。靠右侧对齐-ios真机的输入和展示都有问题。
hbuilderx已升级最新版本4.75，无法解决。


更多关于uni-app textarea 组件设置了auto-height靠右侧对齐直接粘贴一长串文本最右侧列文本无法完全显示只有在真机上会出现这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

hx升级到最新版试试还有没有问题

更多关于uni-app textarea 组件设置了auto-height靠右侧对齐直接粘贴一长串文本最右侧列文本无法完全显示只有在真机上会出现这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经升级了 还是不行呢

回复 1***@qq.com: 同样的代码试试原生微信小程序有没有问题

回复 1***@qq.com: 三方插件可以反馈到插件社区或者插件作者那

这个问题是iOS真机上textarea组件auto-height与右对齐布局的兼容性问题。当粘贴长文本时，iOS系统计算高度后渲染可能出现右侧文本截断。

原因分析：

  1. iOS系统对auto-height的计算机制与Android不同，在右对齐布局下可能出现宽度计算偏差
  2. 文本换行时，iOS对行末字符的渲染处理存在差异
  3. 真机与模拟器的渲染引擎存在细微差别

解决方案：

  1. 使用CSS替代方案
.cell-field {
  display: flex;
  justify-content: flex-end;
}
textarea {
  width: 100%;
  text-align: right;
}
  1. 添加右侧内边距
<textarea
  placeholder="请输入备注"
  placeholder-style="color: #B0B3BC;"
  maxlength="200"
  auto-height
  style="padding-right: 10rpx;"
>
  1. 监听输入事件强制刷新
methods: {
  handleInput(e) {
    // 强制触发布局更新
    this.$nextTick(() => {
      // 可添加延迟确保渲染完成
      setTimeout(() => {}, 50)
    })
  }
}
回到顶部