最稳易调试的HTML结构是：用<table>构建9×9网格，每个<td>内放<input type="text" maxlength="1">，通过data-row和data-col标识位置，初始数字加readonly和given类，配合border-collapse: collapse与粗边框区分宫格。
直接用 <table> + <input> 搭结构、data-row/data-col 标位置、JavaScript 维护二维数组做校验，是最稳、最易调试、面试时最能讲清逻辑的实现方式。Canvas 虽酷但校验坐标映射易出错，不推荐作为第一方案。
怎么组织 HTML 结构才方便 JS 控制？
别嵌套太深，也别用纯 <div> 手写 grid。用语义清晰、浏览器原生支持键盘导航的 <table> 最合适：
- 每个
<td>放一个<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 单元格，整行就误报；挖洞循环里没保存原始终盘副本，回滚就失效。真实问题永远藏在边界条件里。
