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()
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 | 自适应最小行数 | string | 1 |
minlength | 最小长度(透传原生) | — | — |
name | 表单字段名(透传原生) | — | — |
placeholder | 占位提示 | string | — |
readonly | 只读 | boolean | — |
required | 必填标记(透传原生) | boolean | — |
resize | 尺寸调整 | string | — |
rows | 行数 | string | 3 |
show-count | 显示字数计数(框外右下 n/max;超限变红;aria-live 播报) | boolean | — |
size | 尺寸档位 small / medium(默认)/ large | — | — |
spellcheck | 拼写检查(透传原生) | — | — |
status | 校验态:error / warning / success;error 同步内层 aria-invalid | string | — |
value | 值(受控) | string | — |
variant | 形态:outlined(默认)/ filled / borderless | string | outlined |
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 } |