# 文本域 TextArea

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/text-area
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

通过键盘输入内容，是最基础的表单域包装。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

通过键盘输入内容，是最基础的表单域包装。

## 何时使用

需要折行的长文本输入。

## 示例

## TextArea

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoSize | 自适应内容高度 | `boolean \| { minRows?: number, maxRows?: number }` | `false` |
| defaultValue | 默认值 | `string` | - |
| id | `textarea` 元素的 `id`，常用来配合 `label` 使用 | `string` | - |
| maxLength | 最大字符数 | `number` | - |
| onChange | 文本域内容变化时触发 | `(value: string) => void` | - |
| placeholder | 提示文本 | `string` | - |
| rows | 行数 | `number` | `2` |
| showCount | 显示字数，支持自定义渲染 | `boolean \| ((length: number, maxLength?: number) => ReactNode)` | `false` |
| value | 输入值 | `string` | - |

此外还支持以下原生属性：`autoComplete` `autoFocus` `disabled` `readOnly` `onFocus` `onBlur` `onCompositionStart` `onCompositionEnd` `onClick`

### CSS 变量

| 属性                | 说明                   | 默认值                   |
| ------------------- | ---------------------- | ------------------------ |
| --color             | 文字颜色               | `var(--adm-color-text)`  |
| --count-text-align  | 统计文字对齐方式       | `right`                  |
| --disabled-color    | 禁用状态下的文字颜色   | `var(--adm-color-weak)`  |
| --font-size         | 字号                   | `17px`                   |
| --placeholder-color | `placeholder` 文字颜色 | `var(--adm-color-light)` |
| --text-align        | 文字对齐方式           | `left`                   |

### Ref

| 属性          | 说明                | 类型                            |
| ------------- | ------------------- | ------------------------------- |
| blur          | 让输入框失去焦点    | `() => void`                    |
| clear         | 清空输入内容        | `() => void`                    |
| focus         | 让输入框获得焦点    | `() => void`                    |
| nativeElement | 原始 text-area 元素 | `HTMLTextAreaElement` \| `null` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt