82 lines
3.7 KiB
JSON
82 lines
3.7 KiB
JSON
{
|
||
"slug": "numberrangeinput",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 H5 数字区间输入：两个 number 框在 input 与 blur 时校验，失焦按 step 取整。",
|
||
"usage": [
|
||
"结构在标记里静态写好，脚本按 min、max、msg 三个 id 取节点，初始边界常量 STEP、MIN、MAX 写在脚本顶部。",
|
||
"校验在输入时立即执行，越界与最小值大于最大值分别给出不同文案，并给根节点切换 is-error 类。",
|
||
"与 React 端不同，这里在 blur 时会按 STEP 把当前值取整后再校验，即失焦会把 2.4 修正为 2。",
|
||
"两个输入框共用同一个 validate，注册时用 forEach 批量添加 input 与 blur 两个监听。",
|
||
"错误文案写入独立的 .kole-numrange-msg 节点，无错误时置为空串保留节点，而不是移除节点。",
|
||
"单位元与分隔符都是标记里的静态文本，脚本不参与其渲染。"
|
||
],
|
||
"bestPractices": [
|
||
"取整只在 blur 触发，纯键盘上下调值时不经过这条路径，数值仍可能是小数。",
|
||
"根节点是 .kole-numrange 并带 role=group，错误类 is-error 也加在它上面，样式选择器要按这个层级写。",
|
||
"边界常量硬编码在脚本里，改范围要同时改两个 number 输入的原生 min / max 与脚本常量，容易不一致。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "HTML 端无 props，载体为：原生 number 输入承担取值与步进、kole-numrange-* 类名给出结构与提示位、is-error 状态类表达校验失败、aria 的 role=group 标注整组，没有 data-* 行为钩子。",
|
||
"table": [
|
||
{
|
||
"name": "kole-numrange",
|
||
"type": "类名",
|
||
"desc": "根容器，同时是错误状态类 is-error 的挂载点"
|
||
},
|
||
{
|
||
"name": "kole-numrange-sep",
|
||
"type": "类名",
|
||
"desc": "两个数字框之间的分隔符，内容是静态文本"
|
||
},
|
||
{
|
||
"name": "kole-numrange-unit",
|
||
"type": "类名",
|
||
"desc": "单位文本节点，静态写在标记里"
|
||
},
|
||
{
|
||
"name": "kole-numrange-msg",
|
||
"type": "类名",
|
||
"desc": "错误文案位，无错误时文本置空但节点保留"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "状态类",
|
||
"desc": "校验失败时加在根容器上，控制错误配色"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "group 属性",
|
||
"desc": "根节点上的分组语义标注"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"两个数字框只有 placeholder，没有 label 或 aria-label，读屏器分不出最小与最大。",
|
||
"错误文案节点没有 role=alert 与 aria-live，校验结果不会主动播报，也没有 aria-describedby 关联到输入框。",
|
||
"role=group 标了整组但组内没有可读名称，分组本身不提供信息。",
|
||
"原生 number 输入支持上下方向键调值，键盘可用性由浏览器保证。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/NumberRangeInput.html",
|
||
"kind": "HTML 实现",
|
||
"desc": "NumberRangeInput.html —— 本端实现全文（结构、事件与状态逻辑）"
|
||
},
|
||
{
|
||
"file": "frameworks/NumberRangeInput.css",
|
||
"kind": "样式文件",
|
||
"desc": "frameworks/NumberRangeInput.css —— 本端 kole-* 类名与 is-* 状态类的样式定义"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"numberrangeinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"静态结构与 role=group 见 frameworks/NumberRangeInput.html:12-18。",
|
||
"边界常量与校验见 frameworks/NumberRangeInput.html:25-37，is-error 切换见第 34 行。",
|
||
"input 与 blur 双绑定及失焦取整见 frameworks/NumberRangeInput.html:38-45。"
|
||
]
|
||
}
|