KBD标签不能模拟键盘输入，因为它是纯语义化标签，仅表示“用户应按的键”，不绑定事件、不触发keydown/input、不可交互；模拟按键须用KeyboardEvent或InputEvent API。
为什么 KBD 标签不能模拟键盘输入
KBD 是纯语义化 HTML 标签，只用于表示“用户应输入的文本”（比如命令、快捷键），浏览器不会给它绑定任何输入行为，也不触发 keydown 或 input 事件。把它当「可点击输入框」或「自动触发按键」用，注定失败。
常见错误现象：
• 点击 <kbd>Ctrl+C</kbd> 没反应
• 试图用 document.querySelector('kbd').click() 触发复制
• 在表单里把 KBD 当 input 用，结果拿不到值
想模拟键盘输入，该用什么 API
真正能模拟按键行为的是 KeyboardEvent 构造函数 + dispatchEvent，或者更现代的 InputEvent（针对输入框内容变更）。
- 对
input/textarea：优先用input事件 + 设置value，再手动 dispatch - 对监听
keydown的逻辑（如快捷键）：用new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter' }) - 注意：
KeyboardEvent必须指定bubbles: true才能冒泡到父级监听器 - 部分浏览器（如 Safari）限制非用户手势触发的
KeyboardEvent，此时需配合element.focus()
示例（向 textarea 插入文本并触发输入）：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('textarea');
el.value += 'hello';
el.dispatchEvent(new Event('input', { bubbles: true }));
KBD 的正确排版与增强用法
它该出现在文档中作为「说明性文字」，不是交互控件。但可以合理增强可读性与可访问性：
- 嵌套在
code或span内无意义，KBD本身已带默认等宽字体和轻微背景 - 快捷键组合建议用多个
KBD并列：<kbd>Ctrl</kbd><kbd>S</kbd>（而非<kbd>Ctrl+S</kbd>） - 若需响应点击（比如展示快捷键说明），应包裹在
button或加role="button"+tabindex="0"，再绑定 click 处理器 - 屏幕阅读器会朗读 “K B D”，所以内容必须是真实按键名（
<kbd>Escape</kbd>✅，<kbd>关闭面板</kbd>❌）
容易被忽略的兼容性细节
Chrome 95+ 和 Firefox 91+ 支持 KBD 的默认样式微调（比如 kbd { font-family: ui-monospace; }），但 IE 完全不支持，旧版 Safari 对 kbd 的 font-weight 渲染异常。
如果项目需强一致性：
- 统一重置样式：
kbd { font-family: monospace; padding: 2px 4px; border-radius: 3px; background: #f0f0f0; } - 避免依赖
KBD的默认尺寸做布局计算——它的行高、上下间距各浏览器差异明显 - 不要用
KBD包裹动态生成的键名（如<kbd id="dynamic-key"></kbd>后 JS 填充），会导致无障碍信息滞后
真要动态反映按键状态，用 span + ARIA aria-pressed 更稳妥。
