本文详解虚拟键盘实现中因重复聚焦导致光标跳转的核心问题，指出关键在于阻止默认事件行为而非主动重设焦点，并提供完整、健壮的修复方案与最佳实践。
本文详解虚拟键盘实现中因重复聚焦导致光标跳转的核心问题，指出关键在于阻止默认事件行为而非主动重设焦点，并提供完整、健壮的修复方案与最佳实践。
在构建基于 DOM 事件的虚拟键盘时，一个常见却易被忽视的问题是：当用户持续按住某个键（如字母或空格）触发 setInterval 连续输入时，若键盘元素（如 .key）触发了原生浏览器聚焦行为（例如 <button> 或可聚焦元素的 mousedown/mouseup），会导致目标输入框意外失焦再重获焦——从而重置 selectionStart，使光标跳回末尾或错误位置。
根本原因并非光标计算逻辑错误（type() 函数本身正确），而是 事件冒泡引发的隐式焦点切换。你的代码中监听了 keyboard.addEventListener("mousedown", handleKeyboard)，而 .key 元素若为 <button> 或设置了 tabindex，mousedown 会触发浏览器默认聚焦行为，进而触发 focusin 事件，干扰 lastFocusedInput 的状态一致性，并破坏光标定位上下文。
✅ 正确解法：在 handleKeyboard 事件处理器中调用 event.preventDefault()，彻底阻止键盘按键的默认聚焦行为：
function handleKeyboard(event) {
event.preventDefault(); // ✅ 关键修复：阻止 mousedown 默认聚焦
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" ? " " : char; // 建议用普通空格 \u0020，而非 \xa0
if (!char) {
console.warn(`No action associated with ${key.innerText}-key.`);
return;
}
type(char);
typingTimeout = setTimeout(() => {
typingInterval = setInterval(() => type(char), 150);
}, 500);
}
}⚠️ 注意事项：
- event.preventDefault() 必须放在逻辑开头（紧随 event 参数后），确保所有后续判断前已拦截默认行为；
- 避免使用 （\xa0）作为空格字符：它属于不可折叠空白，在文本处理、表单提交和光标定位中行为异常；应统一使用标准空格 ' '；
- stopTyping() 中需补充 lastFocusedInput?.focus()（可选）以确保输入框保持焦点，提升用户体验；
- 推荐为 .key 元素显式设置 tabindex="-1" 并禁用原生按钮行为（如 <button type="button">），从源头规避焦点干扰。
此外，为增强鲁棒性，建议在 type() 函数中增加输入框有效性校验：
function type(char) {
if (!lastFocusedInput || !lastFocusedInput.setRangeText) return; // 确保支持现代 API
const { selectionStart, selectionEnd } = lastFocusedInput;
const text = lastFocusedInput.value;
// 处理全选或部分选中场景
const newValue = text.substring(0, selectionStart) + char + text.substring(selectionEnd);
lastFocusedInput.value = newValue;
// 光标置于插入点后一位（兼容全选场景）
const newCursorPosition = selectionStart + 1;
lastFocusedInput.setSelectionRange(newCursorPosition, newCursorPosition);
}总结：虚拟键盘的光标稳定性不取决于“是否 refocus”，而取决于是否让浏览器接管焦点控制权。通过 preventDefault() 封锁键盘区域的默认交互，并辅以清晰的焦点管理策略，即可实现流畅、精准的模拟输入体验。
