最稳易调试的html结构是：用构建9×9网格，每个内放，通过data-row和data-col标识位置，初始数字加readonly和given类，配合border-collapse: collapse与粗边框区分宫格。

直接用 <table> + <code><input> 搭结构、data-row/data-col 标位置、JavaScript 维护二维数组做校验，是最稳、最易调试、面试时最能讲清逻辑的实现方式。Canvas 虽酷但校验坐标映射易出错，不推荐作为第一方案。

怎么组织 HTML 结构才方便 JS 控制？

别嵌套太深，也别用纯 <div> 手写 grid。用语义清晰、浏览器原生支持键盘导航的 <code><table> 最合适：<ul><li>每个 <code><td> 放一个 <code><input type="text" maxlength="1">，禁用默认增减箭头（避免移动端干扰）

给每个 <input> 加 data-row="0" 和 data-col="0" 属性，比解析 ID 更可靠

初始数字加 readonly 和 class="given"，后续 CSS 可统一设为灰色不可编辑

用 border-collapse: collapse + border: 2px solid #333 在每三行/列加粗边框，视觉区分宫格

输入后怎么实时校验行/列/宫格唯一性？

校验不是“全盘扫一遍”，而是只查当前数字所在的行、列、3×3 宫格——这是性能关键点：

• 拿到当前 <input> 的 dataset.row 和 dataset.col，转成数字索引
• 遍历该行所有 <input>，跳过 readonly 和自身，检查值是否重复
• 同理遍历该列；宫格用 Math.floor(row / 3) * 3 和 Math.floor(col / 3) * 3 算左上角起点，再双重循环 3×3 范围
• 任意一处重复，就给当前 <input> 加 class="error"，CSS 设 background: #ffebee; border: 1px solid #f44336

为什么不能只靠 HTML5 pattern 或 inputmode="numeric" 校验？

它们只管单个输入字符，完全无法判断逻辑冲突：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• pattern="[1-9]" 防不了用户在同行填两个 5
• inputmode="numeric" 只影响软键盘类型，对重复、宫格规则零约束
• 更麻烦的是：用户可能粘贴、拖拽、用开发者工具改 DOM —— 所有这些都绕过前端表单属性
• 真正可靠的校验必须基于内存中的二维数组状态，每次 input 或 change 事件后同步刷新并验证

生成题目时最容易被忽略的坑是什么？

不是“怎么挖空”，而是“挖空后没验证唯一解”。很多初学者用随机删格子 + 回溯求解一次就完事，结果题目多解：

• 回溯法生成终盘后，挖洞必须配合 countSolutions() 函数（限制递归深度或计数上限为 2）
• 如果删掉某格后 countSolutions() > 1，必须立刻恢复该数字，否则玩家会遇到“填了也对、不填也对”的情况
• 这个验证步骤不能省，也不能只做一次——要对每个候选挖洞位置单独验证
• 线上已有不少开源实现把这步写成独立函数，比如叫 hasUniqueSolution(board)，可直接复用

宫格索引计算、错误 class 的批量清除、初始数字与玩家输入的样式隔离——这些细节不写进代码里，光靠“逻辑通”过不了实操面试。校验函数里少一个 continue 跳过 readonly 单元格，整行就误报；挖洞循环里没保存原始终盘副本，回滚就失效。真实问题永远藏在边界条件里。