单文件离线工具如何说清输入错误：校验、焦点与结果一致性

一、输入框先解释规则

这个离线工具将页面、样式和脚本放在一个 HTML 文件中。五个参数均使用真实 input 元素，并以 label 的 for 属性关联名称。时间字段在标签旁标明毫秒；提示文字进一步说明哪些值允许为零、最多次数是否包含首次请求。

输入框采用文本类型，inputmode="numeric" 只是键盘提示，不能充当校验。表单设置 novalidate，由计算核心统一检查十进制整数格式和范围。空值、小数、负数、指数写法均不能进入正常结果路径；单次超时与最多次数至少为一，其他字段可以为零。

错误信息也区分两类情况：格式不符时说明需要整数、不含小数或符号；超出范围时给出允许的上下限。这样用户可以根据文字修改，不必仅凭红色边框猜测。

二、把错误关联回具体字段

每个输入框的 aria-describedby 都列出本字段提示、错误节点和公共整数说明的标识。渲染函数再按校验结果更新 aria-invalid，并把错误文字写入对应节点的 textContent；没有错误的字段会清空文字、恢复正常状态。

标签提供名称，描述关联解释，错误状态标明是否无效。页面同时使用边框变化和可见文字，避免让颜色成为唯一线索。

表单下方还有带 role="alert" 的错误汇总，提示修正标记项、结果暂不显示。这是页面提供的语义结构；具体读屏软件怎样播报，仍取决于浏览器与辅助技术组合。

三、提交时引导，输入时保留位置

源码把焦点移动作为显式参数：提交表单调用 render(true)，普通 input 事件调用默认的 render()。无效提交时，程序按五个字段的固定顺序找到首个错误并调用 focus()，帮助用户直接进入需要修改的位置。

实时输入则更新校验和显示，不走移动焦点的分支。因此用户编辑第二个字段时，即使第一个字段仍有错误，程序也不会把键盘焦点拉回去。CSS 另为输入框、按钮提供 focus-visible 轮廓，便于辨认操作位置。

四、无效输入不能配着旧答案

假设页面原本显示有效计算，用户随后清空预算。输入已经变化，旧次数与耗时若仍像当前答案一样展示，就容易误导人。

实现读取同一份输入快照得到校验结果。一旦无效，就设置 results.hidden，显示修正提示并提前返回。旧结果节点仍存在于 DOM 中，但整块结果被隐藏；这不是删除数据，而是防止继续把它呈现为当前答案。

恢复有效输入后，同一渲染函数更新次数、统计、预算条和文字说明，再用 replaceChildren() 清空旧时间线并生成新行。各区域取自同一个计算结果，减少旧行残留或参数版本不一致造成的误读。

五、说明做到哪里，也说明未证明什么

已有测试文件提取开发目录 HTML 的计算核心，覆盖空值、小数、指数等拒绝案例，但没有创建页面 document，也不直接验证焦点、隐藏状态或读屏播报。本轮仅阅读源码和测试定义，没有重新执行测试或进行浏览器、读屏实测。

可以确认实现包含上述校验与 DOM 更新路径，但不能据此宣称兼容所有读屏软件或符合某一级 WCAG；实际体验应由相应环境中的检查补足。

源码：重试预算计算器：https://gitcode.com/Jerry_a/retry-budget-calculator，重点查看 index.html 的表单结构与 calculator-ui 脚本。