本文详解如何通过 event.preventDefault() 阻止浏览器默认输入行为，在单字符验证码/密码输入场景中精准控制当前输入框赋值与相邻输入框焦点切换，彻底解决因默认行为残留导致“值被重复写入下一个元素”的常见问题。
本文详解如何通过 `event.preventdefault()` 阻止浏览器默认输入行为，在单字符验证码/密码输入场景中精准控制当前输入框赋值与相邻输入框焦点切换，彻底解决因默认行为残留导致“值被重复写入下一个元素”的常见问题。
在构建多位单字符输入框（如短信验证码、PIN码输入）时，一个典型需求是：用户按下一个字母或数字，当前框立即显示该字符并自动跳转到下一个框；按 Backspace 则清空当前框并回退到前一个框。但若直接在 keydown 中修改 value 并调用 focus()，常会遇到值被错误写入新获得焦点的元素——这是因为浏览器的原生输入行为（如自动插入字符或删除逻辑）仍在事件流后续阶段执行，与你的手动赋值发生冲突。
根本原因在于：keydown 事件触发时，浏览器尚未完成默认输入处理；若此时不阻止它，后续的 input 或 keypress 行为仍会生效，导致你刚 focus() 到的下一个 <input> 被意外填充（例如 event.key 被重复应用）。
✅ 正确解法是：在 keydown 中调用 event.preventDefault()，完全接管输入逻辑，只通过 JavaScript 手动设置 value 和 focus()，杜绝原生行为干扰。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
以下是一个完整、健壮的实现示例：
<div id="container">
<input id="i1" onkeydown="handleInputChange(event)" maxlength="1" />
<input id="i2" onkeydown="handleInputChange(event)" maxlength="1" />
<input id="i3" onkeydown="handleInputChange(event)" maxlength="1" />
<input id="i4" onkeydown="handleInputChange(event)" maxlength="1" />
<input id="i5" onkeydown="handleInputChange(event)" maxlength="1" />
</div>
<style>
#container { display: flex; gap: 8px; }
input {
width: 32px; height: 36px;
text-align: center; font-size: 16px;
border: 1px solid #ddd; border-radius: 4px;
}
input:focus { outline: 2px solid #007bff; }
</style>
<script>
function handleInputChange(event) {
event.preventDefault(); // ✅ 关键：阻止浏览器默认输入行为
const input = event.target;
const index = parseInt(input.id.slice(1), 10); // 提取数字ID，如 "i3" → 3
// 输入有效单字符（字母或数字）
if (/^[a-zA-Z0-9]$/.test(event.key)) {
input.value = event.key;
if (index < 5) {
document.getElementById(`i${index + 1}`).focus();
}
}
// 处理 Backspace（注意：用 event.code 更可靠，兼容性优于 event.key）
else if (event.code === 'Backspace') {
input.value = '';
if (index > 1) {
document.getElementById(`i${index - 1}`).focus();
}
}
// 可选：支持 Delete 键（向后删除）
else if (event.code === 'Delete') {
input.value = '';
if (index < 5) {
document.getElementById(`i${index + 1}`).focus();
}
}
}
</script>? 关键注意事项：
- 务必使用 event.preventDefault()：这是防止“值写入下一个元素”的核心；没有它，你的手动 focus() 无法阻断浏览器后续的默认字符插入。
- 优先使用 event.code 判断功能键：event.key 在 Backspace/Delete 场景下可能受输入法影响，而 event.code 始终返回物理按键标识（如 'Backspace', 'Delete'），更稳定。
- 添加 maxlength="1" 属性：作为 HTML 层面的兜底防护，防止粘贴多字符或长按输入。
- ID 命名建议结构化：如 i1, i2 而非纯数字 1, 2，避免 getElementById("1") 与全局命名冲突（HTML ID 以数字开头虽合法，但易引发解析歧义）。
- 增强健壮性：可补充对 Tab、Enter、方向键等的忽略逻辑（return 退出函数），避免干扰正常导航。
此方案完全解耦了输入行为与 DOM 状态更新，逻辑清晰、可维护性强，适用于所有现代浏览器，是构建专业级单字符输入组件的推荐实践。
