---
name: "textarea"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "textarea - 多行文本输入框"
---

## textarea

> [VERSION] 基础库 >= 2.10.0

### 描述

多行输入框组件。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `name` | `string` | 否 | - | 在表单中的字段名 |
| `value` | `string` | 否 | `""` | 输入框内容 |
| `maxlength` | `number` | 否 | - | 最大输入长度，设置为 -1 时不限制 |
| `placeholder` | `string` | 否 | `""` | 输入框为空时显示的占位文字 |
| `placeholder-style` | `string` | 否 | `""` | 占位符样式 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `auto-height` | `boolean` | 否 | `false` | 是否自动增高，设置 autoHeight 时，style.height 不生效 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `focus` | `(event: TextareaFocusEvent) => void` | 输入框聚焦时触发 |
| `blur` | `(event: TextareaBlurEvent) => void` | 输入框失去焦点时触发 |
| `input` | `(event: TextareaInputEvent) => void` | 键盘输入时触发 |
| `confirm` | `(event: TextareaConfirmEvent) => void` | 点击完成时触发 |
| `linechange` | `(event: TextareaLinechangeEvent) => void` | 输入框行数变化时触发 |

**TextareaFocusEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"focus"` | 事件类型 |
| `detail` | `TextareaValueDetail` | 事件数据 |

**TextareaBlurEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"blur"` | 事件类型 |
| `detail` | `TextareaValueDetail` | 事件数据 |

**TextareaInputEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"input"` | 事件类型 |
| `detail` | `TextareaInputDetail` | 事件数据 |

**TextareaConfirmEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"confirm"` | 事件类型 |
| `detail` | `TextareaValueDetail` | 事件数据 |

**TextareaLinechangeEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"linechange"` | 事件类型 |
| `detail` | `TextareaLinechangeDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<view>
  <textarea value="{{content}}" placeholder="请输入内容" maxlength="{{200}}" bind:input="onInput" />
  <text class="counter">{{content.length}} / 200</text>
</view>
```

*index.tyss*

```css
textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  box-sizing: border-box;
}
.counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  display: block;
  margin-top: 8rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    content: '',
  },
  onInput(e) {
    this.setData({ content: e.detail.value });
  },
});
```

#### 自动增高与禁用

*index.tyml*

```xml
<view>
  <textarea auto-height placeholder="输入内容会自动增高" placeholder-style="color:#999" bind:linechange="onLineChange" />
  <textarea disabled="{{true}}" value="不可编辑的内容" />
</view>
```

*index.tyss*

```css
textarea {
  width: 100%;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}
```

*index.js*

```javascript
Page({
  onLineChange(e) {
    console.log('行数:', e.detail.lineCount, '高度:', e.detail.height);
  },
});
```

#### 聚焦与失焦事件

*index.tyml*

```xml
<textarea placeholder="输入反馈内容" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" />
```

*index.tyss*

```css
textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  box-sizing: border-box;
}
```

*index.js*

```javascript
Page({
  onFocus(e) {
    console.log('聚焦:', e.detail.value);
  },
  onBlur(e) {
    console.log('失焦:', e.detail.value);
  },
  onConfirm(e) {
    console.log('确认:', e.detail.value);
  },
});
```