Skip to content

Textarea 文本域 ​

原生 <textarea> 增强:高度自适应(可封顶 / 无上限)、字数统计、一键清除、尺寸档位、形态与校验态。

基础用法 ​

基础用法

行数与尺寸调整 ​

rows / resize

resize 透传原生 resize 值(none / both / horizontal / vertical),默认 none。

高度自适应 ​

autosize

autosize 开启高度自适应:随内容自动增高,空态回到最小高度,超过 max-rows(默认 6)出现滚动条。

自适应边界 ​

autosize + min-rows / max-rows

min-rows(默认 1)控制最小高度,max-rows(默认 6)封顶并出滚动条。旧属性 auto-height 保留兼容。

无上限自适应 ​

autosize + max-rows=0

max-rows="0" 显式关闭封顶:高度随内容无限增长、不出滚动条(长文写作、日志粘贴场景)。缺省 max-rows 时默认 6 行封顶的行为不变——需要无上限必须显式设置。

auto-height 兼容别名 ​

auto-height

auto-height 是 autosize 的兼容别名,行为完全一致:随内容自动增高、空态回到最小行高、超过 max-rows(默认 6)出滚动条。二者任设其一即开启高度自适应。

尺寸档位 ​

size

size="small | medium | large"(默认 medium):字号、上下内边距与最小高度随档位联动,对齐全局控件尺寸 token。

形态 ​

variant

variant="outlined | filled | borderless"(默认 outlined)。filled 灰底无边框、聚焦显边;borderless 透明背景无边框,仅保留聚焦环。

校验态 ​

status

status="error | warning | success":边框与聚焦环随校验结果变色;error 同时给内部文本域标 aria-invalid(读屏可感知)。与 oas-form-item 校验联动时,form-item 会写宿主 aria-invalid,视觉与 error 一致。

字数统计 ​

maxlength + show-count

show-count 在框外右下角显示计数:设 maxlength 时为 n/max(多数派口径,超限变红;maxlength 透传原生,输入层自动截断),未设时只显示当前长度。计数节点带 aria-live="polite",读屏可播报字数变化。

可清空 ​

clearable

这条评论可以一键清除重写。

clearable 有值时显示右上角清除按钮(disabled / readonly 不显示):点击清空内容、派发 oas-clear 事件、焦点回到文本域;autosize 下高度同步回收。

label 可访问名称 ​

label

label 写入内部 aria-label 作可访问名称,回退顺序:label > placeholder > 内置默认文案。可见的表单标签请走 oas-form-item 的 label 通道(label 布局归 form-item 职责)。

原生属性透传 ​

原生属性透传

白名单透传到内部原生 <textarea>:name / autofocus / minlength / required / spellcheck / autocomplete / wrap。oas-form 原生提交时 name 参与取值,required / minlength 参与原生约束校验;wrap="hard" 需同时设置 cols 才会按硬换行提交。

禁用与只读 ​

disabled / readonly

事件 ​

输入与焦点事件

  • oas-input:每次击键,detail: { value }
  • oas-focus / oas-blur:聚焦 / 失焦,detail: { value }
  • oas-change:失焦且值较聚焦时已变才派发(提交语义),detail: { value }

方法 ​

focus() / blur() / select()

全选 select()聚焦 focus()失焦 blur()

focus(options?) / blur() / select() 均委托内部原生文本域。

程序性读/写当前值走公开 value property(对齐原生 textarea.value):el.value 读取——当前文本(内部 textarea 在场)否则 value 属性快照;el.value = x 写入——写受控 value 属性并即时回写内部控件,不派发事件。

API ​

oas-textarea ​

属性 ​

属性说明类型默认值
auto-height旧属性名(兼容 autosize)boolean—
autocomplete透传内层原生 textarea——
autofocus自动聚焦(透传原生)——
autosize高度自适应boolean—
clearable显示清除按钮(一键清空,派发 oas-clear + oas-input)boolean—
disabled禁用boolean—
label无障碍名(aria-label 通道,缺省回落 placeholder → locale)——
max-rows自适应最大行数string—
maxlength最大长度(透传原生;配 show-count 显示计数)string—
min-rows自适应最小行数string1
minlength最小长度(透传原生)——
name表单字段名(透传原生)——
placeholder占位提示string—
readonly只读boolean—
required必填标记(透传原生)boolean—
resize尺寸调整string—
rows行数string3
show-count显示字数计数(框外右下 n/max;超限变红;aria-live 播报)boolean—
size尺寸档位 small / medium(默认)/ large——
spellcheck拼写检查(透传原生)——
status校验态:error / warning / success;error 同步内层 aria-invalidstring—
value值(受控)string—
variant形态:outlined(默认)/ filled / borderlessstringoutlined
wrap换行策略(透传原生:soft/hard)——

Property(JS property;是否写回 attribute 见各行说明) ​

Property说明类型默认值
value当前值:内部 textarea 当前文本(el.value 读;el.value = x 写受控 value 并即时回写,不派发事件)string—

事件 ​

事件说明
oas-blur失焦时派发,detail: { value }
oas-change原生 change 语义:失焦且值已变时派发,detail: { value }
oas-clear点击清除按钮时派发(同时派发 oas-input),detail: { originalEvent: new MouseEvent('click') }
oas-focus聚焦时派发,detail: { value }
oas-input输入中,detail: { value }

基于 MIT OR Apache-2.0 双许可发布