跳到主要内容
Termlib

UI 组件 · 表单输入

多行文本框

Textarea

也叫：多行输入框、文本域、文本区域、TextArea

可以输入多行文字的输入框，按回车会换行，适合备注、评论、问题描述这类较长的内容。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

「问题描述」用多行文本框，默认 4 行高，随内容自动增高，最多 10 行后出现滚动条。框内占位提示「请描述遇到的问题，至少 10 个字」，右下角显示字数计数「0/500」，超过 500 字不能再输入，不允许用户拖动改变大小。

发给

01判断

你的内容是这样吗？

对照两列，确认多行文本框是不是你要找的。

符合这些情况，用多行文本框

  • 填写备注、评论、反馈、问题描述这类可能有好几句话的内容
  • 需要保留换行格式的纯文本，比如收货地址、个人简介
  • 聊天或 AI 对话的消息输入区，内容长短不固定

是这些情况，换成别的

  • 姓名、手机号、标题这类一行就能写完的短内容，应该用单行输入框

    改用输入框

  • 需要加粗、插入图片、设置标题格式的内容

    改用富文本编辑器

  • 只能填数字的内容

    改用数字输入框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只有一两行高，用户写长内容时要在小框里来回滚动

  2. 02

    有字数上限却不显示计数，提交时才报错说内容超长

  3. 03

    用多行文本框收集标签、邮箱列表这类结构化数据，让用户自己用逗号分隔

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由多行高度的输入区域和占位提示组成，右下角常带字数计数，可以设置拖拽改变大小或自动增高。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1比普通输入框高很多的矩形框，占据好几行
  2. 2右下角常有「0/200」这样的字数计数，或一个可拖拽的小斜纹
  3. 3框内左上角有灰色占位提示

04解释

详细解释

多行文本框就是能换行的 输入框，HTML 里是 <textarea>。它默认显示 3~5 行高，内容多了会出现滚动条，也可以设置成随内容自动长高。右下角常显示「已输入 / 最多字数」的计数，比如「32/200」，帮用户控制长度。

它和单行输入框的区别在于内容长短和是否换行：姓名、标题用输入框；备注、评价、问题描述、个人简介用多行文本框。如果用户还需要加粗、插图片、排版，就超出了它的能力，要用富文本编辑器。在聊天或 AI 对话的输入区，多行文本框通常设置成回车发送、Shift+回车换行。

开发者信息
术语 ID
component-textarea
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • textarea
  • textarea.ant-input
  • .el-textarea
  • [class*="MuiInputBase-multiline"]
  • .arco-textarea
  • .arco-textarea-wrapper
  • .t-textarea
  • .n-input--textarea
  • [data-slot="textarea"]
  • textarea.form-control
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • textarea
  • text-area
  • multiline-input
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Textarea
  • TextArea
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30