PinInput 验证码
分格验证码输入,支持键盘方向键移动、Backspace 回退、粘贴自动分发。
基础用法
默认 6 位
自定义长度
length=4
通过 length 设置格子数量。
遮罩
mask
mask 将格子切换为密码型,输入值被遮罩。
受控初值
value 预填
value 分发到各格;超出 length 的部分自动截断。
输入类型
type(text / number)
type 透传原生 input 类型:text(默认)允许任意字符;number 限制为数字输入(移动端弹出数字键盘);设 mask 时强制为 password 遮罩(见上)。
校验失败态
aria-invalid 已列入 observedAttributes:外部动态 setAttribute('aria-invalid', 'true'/'false') 即时切换——所有格子与容器同步该状态并标 danger 色边框,读屏播报「无效」。通常由宿主在 oas-complete 后校验置位(如验证码错误/过期);移除该属性即恢复默认态。
aria-invalid 动态切换
aria-invalid 静态示例
禁用 / 只读
disabled
readonly
事件
输入与完成事件
监听 oas-input(每格输入)、oas-change / oas-complete(填满):
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
aria-invalid | 校验失败态(同步到容器与各格,标 danger) | string | — |
disabled | 禁用 | boolean | — |
length | 验证码位数 | string | 6 |
mask | 星号遮罩 | boolean | — |
readonly | 只读 | boolean | — |
type | 格子输入类型 | string | text |
value | 当前值(受控) | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 填满时派发,detail: { value } |
oas-complete | 填满时派发,detail: { value } |
oas-input | 每格输入,detail: { value, index } |
键盘:←/→ 格间移动,Backspace 删除当前格并回退,支持粘贴自动分发;全空时每格均可聚焦(原生 caret)。
ARIA:容器 role="group" + aria-label,每格 aria-label="第 n 位",aria-invalid 同步到容器与各格。