Skip to content

输入行数及高度自适应 ​

多行输入框可控制默认高度,也可让高度随内容变高。界面属性名是 输入框行数、高度是否自适应(仅多行输入框等文本域类组件有)。

在哪里找 ​

选中 多行输入框 → 右侧 组件配置 → 属性配置 → 输入框行数 / 高度是否自适应。

怎么选 ​

配置适合注意
只设 输入框行数(自适应关)请假事由、短备注,希望版面整齐内容超出后框内滚动
打开 高度是否自适应意见反馈、长说明,长短不一一屏信息变少;移动端更要控制篇幅
行数 + 自适应一起用希望空态有最小高度,写多了再长高行数作起始高度参考
再配合最大长度 / 字数统计既要空间又要控篇幅见验证配置;属性里可开「是否显示统计字数」

怎么用(分步) ​

下面以「意见反馈」里的「意见」多行框为例。

  1. 选中多行输入框,在 属性配置 找到 输入框行数 与 高度是否自适应。

找到输入框行数与高度是否自适应

  1. 把 输入框行数 调成合适值(如 4),先看固定高度是否够用。

将输入框行数设为 4

  1. 看画布:多行框高度应按行数变高。

画布上多行高度随行数变化

  1. 内容长短不好估时,打开 高度是否自适应。

打开高度是否自适应

  1. 点 预览,输入较长文字,确认高度是否随内容增高、下方字段是否被顶乱。

预览长文本时高度自适应

TIP

行数解决「默认占多高」;自适应解决「写多了能不能长高」。先定行数,再决定要不要开自适应。

场景示例 ​

入门:请假事由固定 3 行 ​

背景:请假申请希望事由简短,页面整齐,不希望框无限变高。

步骤:

  1. 选中「请假事由」,将 输入框行数 设为 3,并关闭 高度是否自适应。

请假事由:行数 3 且关闭自适应

  1. 看画布上的多行框高度是否约为三行。

画布:请假事由固定约三行

预期:空态与填写时高度稳定;内容超出时在框内滚动。需要控字数时可再开字数统计或配验证。

常用:意见反馈随内容增高 ​

背景:意见可长可短,希望少写时不占太多,写多时不用挤在小框里滚。

步骤:

  1. 选中「意见」,设一个较小的起始 输入框行数(如 2),并打开 高度是否自适应。

意见:起始行数与自适应

  1. 点 预览,输入多行意见,确认高度随内容变高。

预览:意见多行随内容增高

预期:短意见时高度接近起始行数;长意见时框变高。若整页被顶得过长,可改回固定行数,或用最大长度限制篇幅。

常用:「其它说明」+ 显隐 ​

问卷里「其它说明」可默认 2 行并开自适应;仅当题型为「其它」时显示——见隐藏条件。

注意点 ​

  • 这两项主要出现在 多行输入框;单行输入框一般没有「输入框行数 / 高度是否自适应」。
  • 自适应过高会影响一屏信息量,移动端更要克制。
  • 行高、边距的视觉微调可在样式配置,但先用属性行数解决结构高度。
  • 改完务必 预览:看长文本、短文本和下方字段排布。

相关阅读 ​