85 lines
3.9 KiB
JSON
85 lines
3.9 KiB
JSON
{
|
||
"slug": "codeinput",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 H5 验证码输入：容器用 data-length 与 data-masked 声明位数的掩码，单元格由脚本生成。",
|
||
"usage": [
|
||
"结构完全由 initCode 生成：容器上只写 data-length，脚本按这个值 createElement 出对应数量的 .kole-code-cell 与内部 input。",
|
||
"掩码用 data-masked=1 声明，只在建单元格时给每格加一次 is-masked 类，与 React 端每次渲染都参与 className 拼接不同。",
|
||
"焦点态靠 input 上的 focus 与 blur 切换父级 is-focus，填充态靠 input 事件切换 is-filled，两个状态类都落在单元格上。",
|
||
"每位同样带 aria-label 验证码第 N 位，粘贴处理绑在 input 上（不是容器），所以粘到任意一格都会铺满全部格子。",
|
||
"输入完成后脚本在 tip 节点写入已输入完成文案，并额外在容器上派发一个 change 自定义事件，detail 里带完整验证码。"
|
||
],
|
||
"bestPractices": [
|
||
"对外通信靠 CustomEvent(change) 而非常规的表单 change，接入方要监听容器上的 change 事件并读 e.detail。",
|
||
"tip 节点是外部传入的独立元素，不在组件容器内，把两个 id 传错时提示文本会静默不更新。",
|
||
"单元格用 parseInt(root.dataset.length) 解析，HTML 里写成 data-length=abc 会退化成 NaN 并导致一格都不渲染，需要保证是数字。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "HTML 端无 props，载体为：data-length 与 data-masked 描述实例配置、脚本生成的原生 input 承担输入、kole-* 类名定结构、is-focus / is-filled / is-masked 三个状态类表状态，并以 change 自定义事件对外通信。",
|
||
"table": [
|
||
{
|
||
"name": "data-length",
|
||
"type": "数字字符串",
|
||
"desc": "容器上声明验证码位数，脚本据此生成对应数量的单元格"
|
||
},
|
||
{
|
||
"name": "data-masked",
|
||
"type": "1 表示开启",
|
||
"desc": "为 1 时每个单元格在生成时带上 is-masked 掩码类"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "状态类",
|
||
"desc": "焦点落在该格时加在 .kole-code-cell 上，失焦移除"
|
||
},
|
||
{
|
||
"name": "is-filled",
|
||
"type": "状态类",
|
||
"desc": "该格有字符时添加，退格清空时移除"
|
||
},
|
||
{
|
||
"name": "is-masked",
|
||
"type": "状态类",
|
||
"desc": "掩码模式下单元格的显示样式"
|
||
},
|
||
{
|
||
"name": "kole-code-cell",
|
||
"type": "类名",
|
||
"desc": "单个验证码格子的容器，状态类都挂在它上面"
|
||
},
|
||
{
|
||
"name": "kole-code-input",
|
||
"type": "类名",
|
||
"desc": "格子内的原生 input，maxLength 为 1 且 inputMode 为 numeric"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"每格都设置了 aria-label 验证码第 N 位，配合 inputMode=numeric 能正确唤起数字键盘。",
|
||
"提示位 .kole-code-tip 是独立节点，没有 aria-live，输入完成或出错都不会被主动播报。",
|
||
"输入框没有 aria-invalid，错误态只体现在文案上，读屏器无法区分正常提示与校验失败。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/CodeInput.html",
|
||
"kind": "HTML 实现",
|
||
"desc": "CodeInput.html —— 本端实现全文（结构、事件与状态逻辑）"
|
||
},
|
||
{
|
||
"file": "frameworks/CodeInput.css",
|
||
"kind": "样式文件",
|
||
"desc": "frameworks/CodeInput.css —— 本端 kole-* 类名与 is-* 状态类的样式定义"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"codeinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"两个实例的声明见 frameworks/CodeInput.html:17 与第 23 行，初始化调用见第 104-105 行。",
|
||
"data-length 与 data-masked 读取见 frameworks/CodeInput.html:30-31，aria-label 写入见第 42 行。",
|
||
"change 自定义事件派发见 frameworks/CodeInput.html:97-101。"
|
||
]
|
||
}
|