返回知识库

界面与交互 · 操作与输入

多行文本框Textarea

多行文本输入控件,适合较长留言或描述;靠字数计数、上下限和提交后保留让长文也可控。

边写边知道够不够、会不会超

多行输入最怕写完才发现不够长、超了被截,或提交失败丢全文。下面这个反馈框把字数、上下限和提交结果都长在框本身上——先写几句试试。

场景:用户在产品反馈页写下复现步骤。框本身要随时回答「现在多少字 / 够了没 / 会不会超」,提交后还不能丢内容。

0 / 300
普通 Enter 换行;Cmd/Ctrl + Enter 提交。字数按原始字符计,最少字数忽略首尾空格。提示:粘一段长文本看框先增高、到上限后改用内部滚动。

待输入原因:textarea 在输入时即时统计字数,普通 Enter 换行不提交。下一步:先写满 10 字的复现步骤,看计数、边框和提交按钮如何变化。对照:下限 10 字 / 上限 300 字 / 当前 0 字。

实验台教会的事

把你刚才在框上看到的变化命名清楚,迁移到任何多行输入字段都成立。

  1. 多行换行,提交另走快捷键普通 Enter 在框里另起一行,不会误提交;要提交用按钮或 Cmd/Ctrl + Enter,长文本不会被一次回车送走。
  2. 字数实时长在框上计数 N / max 贴在框角,随输入跳动;它和提交按钮的启用/停用是同一个判断的两面。
  3. 最少字数守住「写到位」未达下限时提交按钮停用,并说明还差几字;校验只看去首尾空格后的有效字数,避免空格凑数。
  4. 上限要分预警和硬截接近上限时计数转琥珀提醒,给用户精简的余地;真正超出时计数与边框转红、提交停用,而不是默默截掉内容。
  5. 自适应高度,到顶再滚动框随内容增高,看得见完整上下文;超过设定高度后改用内部滚动,避免把整页撑坏。
  6. 提交后保留全文提交成功让框变只读并贴「已提交」徽标;失败或重审时还能回到原文继续编辑,不丢已写内容。

什么时候用 textarea,什么时候换 input

看内容是否需要多行和较长篇幅,而不是看字段叫什么名字。

适合 textarea多行、较长、需要换行

问题反馈、个人简介、评审意见:内容会跨行,需要字数上下限和提交后保留。

适合 textarea结构化但自由

备注、补充说明、评论:比单行字段宽松,但仍要给提示、计数和最大长度。

换成 input短而原子

姓名、邮箱、验证码:一行就能写完,用单行 input 更符合预期,别让用户在多行框里找光标。

别这样无限放高、没有上限

不给最大高度或字数上限,超长内容会撑破布局,也无法被后端稳定接收。

怎么用一个多行反馈框

从用户开始写到拿到可提交判断的最短路径。

  1. 给框一个持久的 label,说明要写什么(如「问题反馈」),placeholder 只补充示例,不替代 label。
  2. 定下字数下限和上限,把计数 N / max 放在框角,随输入实时更新。
  3. 用普通 Enter 换行,另设按钮或 Cmd/Ctrl + Enter 提交;上下限不达标时停用提交并说明原因。
  4. 让框随内容自适应增高,设定最大高度;超过后内部滚动,不撑破页面。
  5. 提交后保留全文并贴可见状态;失败或重审能回到原文继续编辑。

正反例:同一份反馈,只改一个关键选择

目标都是收集问题复现步骤。差别只在框是否把规则和结果长在自己身上。

正例多行框 + 计数 + 自适应 + 提交保留

框里能换行写完整步骤;计数实时更新,接近上限转琥珀,超限转红并停用提交;提交后贴「已提交」徽标,失败仍可回到原文。

这样用
反例单行框硬塞 + 无计数 + 失败丢内容

用单行 input 收长反馈,内容被截断还看不到还剩多少;提交失败直接清空,用户写了几百字全丢,只能重打一遍。

别这样

快速自测

要在反馈页收集一段会换行的问题复现步骤,并保证用户知道写够了没,下面哪种做法最稳妥?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。