# 多行文本

随内容增高的文本域，带字数统计。硬上限用 maxlength，软上限 data-soft-max 允许继续输入但提示超出。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div class="zh-ta" data-max-rows="6">
  <textarea class="zh-textarea" rows="2" maxlength="80" placeholder="输入内容，最多 80 字" aria-label="简介"></textarea>
  <span class="zh-ta-count" aria-hidden="true">0 / 80</span>
</div>

<div class="zh-ta" data-soft-max="30" data-max-rows="6">
  <textarea class="zh-textarea" rows="2" placeholder="超过 30 字会标红，仍可继续输入" aria-label="备注">这段文字已经超过了三十个字的软上限，计数会变红并提示超出多少字。</textarea>
  <span class="zh-ta-count" aria-hidden="true"></span>
</div>
```

## 样式类

`zh-ta`、`zh-textarea`、`zh-ta-count`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-max-rows` | .zh-ta | 整数，默认 6 | 最多增高到几行，超过后出现滚动条 |
| `data-soft-max` | .zh-ta | 整数 | 软上限：超过后计数变红、textarea 设 aria-invalid，但仍可输入 |
| `maxlength` | textarea | 整数 | 硬上限：浏览器阻止继续输入，计数显示「当前 / 上限」 |
| `data-ta-msg` | .zh-ta 的兄弟元素 | 带 hidden 的提示容器，内含一个 <span> | 可选：超出软上限时显示「超出 N 字」 |

## 无障碍

- 计数文字是 aria-hidden；若在旁边放一个 .zh-inp-sr（视觉隐藏的 aria-live 区域），越过或回到软上限时会朗读「已超出字数上限」
- 超出软上限时 textarea 会设置 aria-invalid="true"

## 常见问题

### 多行文本是什么？

随内容增高的文本域，带字数统计。硬上限用 maxlength，软上限 data-soft-max 允许继续输入但提示超出。

### 怎么使用多行文本？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 多行文本支持键盘和读屏吗？

计数文字是 aria-hidden；若在旁边放一个 .zh-inp-sr（视觉隐藏的 aria-live 区域），越过或回到软上限时会朗读「已超出字数上限」；超出软上限时 textarea 会设置 aria-invalid="true"。

### 多行文本需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。