纯HTML无法实现真正全键盘组件，因其无事件监听与状态更新能力，仅用div/button模拟外观，必须依赖JavaScript处理按键响应、焦点同步及输入法兼容等核心逻辑。
纯 HTML 无法实现真正意义上的“全键盘组件”——它没有事件监听能力、不能响应按键、也无法动态更新状态。所谓“HTML 全键盘”，本质是用 <div>、<button> 模拟键帽外观，必须搭配 JavaScript 才能完成交互逻辑。
为什么不能只用 HTML 写 QWERTY 键盘组件
HTML 是标记语言，只负责结构和语义。即使你用 <button> 画出所有键位，点击也不会自动触发 keydown 或映射到真实键盘行为；用户按物理键盘时，这个“键盘”完全无感知。常见误区是把静态布局当成功能组件，结果点不动、按不响、无法同步输入焦点。
-
<input>或<textarea>获取焦点后，原生键盘事件才生效，模拟键盘只是视觉辅助 - 仅用 CSS Grid 布局的“键盘”没有
tabindex或role="button"就无法被键盘聚焦，也不符合可访问性要求 - QWERTY 布局中存在非标准键（如
Backspace、Enter、Shift），需手动绑定行为，HTML 本身不提供键码映射
用 button + dataset 实现可点击的键位映射
每个键用 <button> 标签，通过 data-key 属性声明其对应的真实键值（如 "a"、"Enter"），再由 JS 统一处理点击事件并派发 input 或模拟 KeyboardEvent。
<button type="button" data-key="a">A</button> <button type="button" data-key="Backspace">←</button> <button type="button" data-key="Enter">↵</button>
- 务必加
type="button"，避免表单默认提交行为 -
data-key值应与event.key保持一致（如大小写敏感，"Shift"不是"shift"） - 对修饰键（
Shift、CapsLock）需维护内部状态，不能仅靠点击切换样式
如何让点击键位真正影响焦点元素的输入
核心是找到当前获得焦点的可编辑元素（document.activeElement），判断是否为 input 或 textarea，再根据点击的 data-key 插入字符或触发操作。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 插入字符：用
el.setRangeText()或操作el.value+ 光标位置（el.selectionStart） - 删除：检测
data-key === "Backspace"，截取value前段 - 换行：对
textarea插入"\n"；input类型不支持换行，应忽略Enter或转为提交 - 注意：直接
el.value += char会丢失光标位置，导致输入错位
容易被忽略的兼容性细节
看似简单的键盘组件，在移动端、屏幕阅读器、IME 输入法下表现差异极大。很多“能点、能输”的 demo 在真实场景中会失效。
- 移动端 Safari 对
document.execCommand已废弃，且input的focus()可能被拦截，需在用户手势回调中调用 - 使用
role="application"包裹键盘区域，并给每个键加aria-label（如aria-label="Shift key"）才能被读屏软件识别 - 中文输入法下，点击虚拟键不应干扰 IME 流程；应避免在
compositionstart期间处理click -
getSelection().getRangeAt(0)在 Firefox 中可能抛错，需兜底用document.getSelection()判断
真正可用的全键盘组件，90% 的工作量不在布局，而在状态同步、输入法兼容、焦点管理与可访问性补全。别急着画键帽，先想清楚：这个键盘到底要替谁输入？在什么设备上必须可用？哪些键必须支持长按或组合？这些问题没答案，代码写得再整齐也只是玩具。
