本文详解虚拟键盘实现中因重复聚焦导致光标跳转的根源问题，指出关键在于阻止默认聚焦行为而非主动重设焦点，并提供完整的事件处理优化方案与可稳定运行的代码示例。
本文详解虚拟键盘实现中因重复聚焦导致光标跳转的根源问题，指出关键在于阻止默认聚焦行为而非主动重设焦点，并提供完整的事件处理优化方案与可稳定运行的代码示例。
在构建基于 DOM 的虚拟键盘时，一个常见却容易被忽视的问题是：当用户多次点击按键（尤其是长按模拟连续输入）后，若输入框意外失去再获得焦点，selectionStart 值会异常重置为 0 或末尾，导致字符插入位置错误、光标“跳跃”。你提供的代码中，问题并非出在 type() 函数的光标计算逻辑（该部分正确），而在于事件触发链中的隐式焦点争夺。
根本原因在于：mousedown 事件默认会触发目标元素（即 .key 按钮）的聚焦行为；当键盘区域被点击时，浏览器可能尝试将焦点移至按键本身（尤其在 <button> 或可聚焦元素上），进而触发 focusin 事件——这会导致 lastFocusedInput 被意外覆盖或 input 元素被动失焦/重获焦，破坏当前光标上下文。
✅ 正确解法：在 handleKeyboard 中调用 event.preventDefault()，彻底阻止按键的默认聚焦行为，从而维持输入框的焦点稳定性与光标位置一致性。
以下是优化后的核心代码（仅修改关键部分，其余逻辑保持健壮性）：
function handleKeyboard(event) {
event.preventDefault(); // ✅ 关键修复：阻止按键默认聚焦，避免干扰 input 焦点状态
const key = event.target.closest(".key");
if (!key) return;
if (!lastFocusedInput) {
console.warn("Please first choose a target for your input!");
return;
}
if (!isTyping) {
isTyping = true;
let char = key.dataset.value;
char = char === "Space" ? "\xa0" : char;
if (!char) {
console.warn(`Currently no action associated with ${key.innerText}-key.`);
return;
}
type(char);
typingTimeout = setTimeout(() => {
typingInterval = setInterval(() => type(char), 150);
}, 500);
}
}⚠️ 补充注意事项：
- 确保 .key 元素不具有 tabindex 或 contenteditable 属性，否则仍可能意外捕获焦点；
- 若使用 <button> 实现按键，请显式设置 tabindex="-1" 并保持 event.preventDefault()；
- focusin 监听器无需改动，它仅用于初始绑定，但需确保其触发时机早于键盘操作；
- 连续输入时，setSelectionRange() 必须在 value 更新之后立即执行（当前代码已满足，切勿延迟）；
- 对于 textarea 和 input[type="text"]，selectionStart/End 行为一致，无需额外分支。
最终效果：无论用户快速连点还是长按按键，只要输入框保持焦点（由用户首次点击确立），光标将严格按预期位置递增，无跳变。此方案轻量、兼容性强，且不依赖 document.activeElement 轮询或强制 focus() 调用——后者恰恰是引发光标错乱的典型反模式。
