当用户点击屏幕上的虚拟按键后，再按物理键盘的空格或回车键，该按钮对应字符会被意外重复插入——这是由于 元素在获得焦点时，空格/回车会自动触发 click 事件所致。
当用户点击屏幕上的虚拟按键后，再按物理键盘的空格或回车键，该按钮对应字符会被意外重复插入——这是由于 `
这是一个典型的 HTML 表单控件行为陷阱：。当你点击虚拟按键（如 ）后，该按钮仍处于 :focus 状态；此时若用户按下物理键盘的空格键，浏览器不仅会触发 keypress（输入空格），还会额外派发一次 click 事件——导致 keyClick('a') 被再次执行，从而重复追加 'a'。
✅ 根本原因与验证
- keypress 事件捕获到 ' '（空格）或 'Enter'，调用 keyClick(e.key) → 正确插入空格/换行；
- 但与此同时，聚焦的 ；
- 这就是为何仅空格和回车出现该问题，且只发生在“先点按钮、再按键盘”的组合场景下。
✅ 推荐解决方案：移除
最简洁、健壮的解法是避免使用 ，改用语义中性、无默认键盘交互行为的元素（如
或 ）：
<style>
.key {
display: inline-block;
padding: 6px 12px;
margin: 2px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.key:hover {
background: #e0e0e0;
}
.key:active {
background: #d0d0d0;
}
</style>
<body>
<div id="text" contenteditable="false" style="min-height: 2em; padding: 8px; border: 1px solid #ddd; margin-bottom: 12px;"></div>
<div id="a" class="key" onclick="keyClick('a')">a</div>
<div id="space" class="key" onclick="keyClick(' ')">SPACE</div>
<div id="enter" class="key" onclick="keyClick('\n')">ENTER</div>
</body>
<script>
window.addEventListener('keypress', (e) => {
// 拦截所有 keypress，统一交由 keyClick 处理
// 注意：keypress 已废弃，生产环境建议改用 keydown + e.key 判断
if (e.key === 'Enter') {
keyClick('\n');
} else if (e.key === ' ') {
keyClick(' ');
} else if (e.key.length === 1) { // 单字符（字母、数字、符号）
keyClick(e.key);
}
});
function keyClick(char) {
const textEl = document.getElementById('text');
textEl.textContent += char;
// 可选：保持光标在末尾（对 contenteditable 更重要）
if (textEl.focus) textEl.focus();
}
</script>⚠️ 注意事项与进阶建议
- 不要依赖 keypress：该事件已被现代标准弃用，推荐改用 keydown 并结合 e.key（如 e.key === ' ' 或 e.key === 'Enter'）进行判断，兼容性更好且逻辑更清晰；
- 禁用按钮聚焦（备选方案）：若必须保留
-
处理换行逻辑：'\n' 在普通 中不会换行，需设置 white-space: pre-wrap 或改用
