多行文本

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

带行为核心包

示例

代码

<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>

属性

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

样式类

zh-ta　zh-textarea　zh-ta-count

计数文字是 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。