问题反馈、个人简介、评审意见:内容会跨行,需要字数上下限和提交后保留。
界面与交互 · 操作与输入
多行文本框Textarea
多行文本输入控件,适合较长留言或描述;靠字数计数、上下限和提交后保留让长文也可控。
边写边知道够不够、会不会超
多行输入最怕写完才发现不够长、超了被截,或提交失败丢全文。下面这个反馈框把字数、上下限和提交结果都长在框本身上——先写几句试试。
场景:用户在产品反馈页写下复现步骤。框本身要随时回答「现在多少字 / 够了没 / 会不会超」,提交后还不能丢内容。
0 / 300
普通 Enter 换行;Cmd/Ctrl + Enter 提交。字数按原始字符计,最少字数忽略首尾空格。提示:粘一段长文本看框先增高、到上限后改用内部滚动。待输入原因:textarea 在输入时即时统计字数,普通 Enter 换行不提交。下一步:先写满 10 字的复现步骤,看计数、边框和提交按钮如何变化。对照:下限 10 字 / 上限 300 字 / 当前 0 字。
实验台教会的事
把你刚才在框上看到的变化命名清楚,迁移到任何多行输入字段都成立。
- 多行换行,提交另走快捷键普通 Enter 在框里另起一行,不会误提交;要提交用按钮或 Cmd/Ctrl + Enter,长文本不会被一次回车送走。
- 字数实时长在框上计数 N / max 贴在框角,随输入跳动;它和提交按钮的启用/停用是同一个判断的两面。
- 最少字数守住「写到位」未达下限时提交按钮停用,并说明还差几字;校验只看去首尾空格后的有效字数,避免空格凑数。
- 上限要分预警和硬截接近上限时计数转琥珀提醒,给用户精简的余地;真正超出时计数与边框转红、提交停用,而不是默默截掉内容。
- 自适应高度,到顶再滚动框随内容增高,看得见完整上下文;超过设定高度后改用内部滚动,避免把整页撑坏。
- 提交后保留全文提交成功让框变只读并贴「已提交」徽标;失败或重审时还能回到原文继续编辑,不丢已写内容。
什么时候用 textarea,什么时候换 input
看内容是否需要多行和较长篇幅,而不是看字段叫什么名字。
备注、补充说明、评论:比单行字段宽松,但仍要给提示、计数和最大长度。
姓名、邮箱、验证码:一行就能写完,用单行 input 更符合预期,别让用户在多行框里找光标。
不给最大高度或字数上限,超长内容会撑破布局,也无法被后端稳定接收。
怎么用一个多行反馈框
从用户开始写到拿到可提交判断的最短路径。
- 给框一个持久的 label,说明要写什么(如「问题反馈」),placeholder 只补充示例,不替代 label。
- 定下字数下限和上限,把计数 N / max 放在框角,随输入实时更新。
- 用普通 Enter 换行,另设按钮或 Cmd/Ctrl + Enter 提交;上下限不达标时停用提交并说明原因。
- 让框随内容自适应增高,设定最大高度;超过后内部滚动,不撑破页面。
- 提交后保留全文并贴可见状态;失败或重审能回到原文继续编辑。
正反例:同一份反馈,只改一个关键选择
目标都是收集问题复现步骤。差别只在框是否把规则和结果长在自己身上。
框里能换行写完整步骤;计数实时更新,接近上限转琥珀,超限转红并停用提交;提交后贴「已提交」徽标,失败仍可回到原文。
这样用用单行 input 收长反馈,内容被截断还看不到还剩多少;提交失败直接清空,用户写了几百字全丢,只能重打一遍。
别这样快速自测
要在反馈页收集一段会换行的问题复现步骤,并保证用户知道写够了没,下面哪种做法最稳妥?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。