本文介绍在 Svelte 中为输入框（如银行卡号）实现「实时自动插入空格」功能的可靠方案，解决 bind:value 与 keydown 事件时序冲突问题，并提供可维护、健壮的输入格式化逻辑。
本文介绍在 svelte 中为输入框（如银行卡号）实现「实时自动插入空格」功能的可靠方案，解决 `bind:value` 与 `keydown` 事件时序冲突问题，并提供可维护、健壮的输入格式化逻辑。
在 Svelte 中，直接在 on:keydown 中修改 bind:value 绑定的变量（如 inputAC）会导致逻辑错位：因为 keydown 触发时，浏览器尚未更新 <input> 的值，而 Svelte 的响应式赋值也尚未同步——此时读取的 inputAC 仍是旧值，导致空格总“滞后一步”（例如第 5 个字符后才加空格，而非第 4 个后立即补空格）。
✅ 推荐方案：改用 on:input + 手动控制值更新
input 事件在用户输入完成、DOM 值已更新后触发，天然适配格式化需求。结合 preventDefault() 和 setSelectionRange() 可精准控制光标位置，避免跳位：
<script>
let inputAC = "";
function formatCardNumber(value) {
// 移除非数字字符，保留纯数字
const digits = value.replace(/\D/g, "");
// 每 4 位插入一个空格（支持任意长度，如 16/19 位卡号）
return digits
.split('')
.map((c, i) => (i > 0 && i % 4 === 0 ? ' ' + c : c))
.join('');
}
function handleInput(e) {
const input = e.target;
const { value, selectionStart, selectionEnd } = input;
// 格式化新值
const formatted = formatCardNumber(value);
// 防止重复触发（避免无限循环）
if (formatted === inputAC) return;
// 更新绑定值
inputAC = formatted;
// 计算新光标位置（关键！保持用户体验）
const newSelectionStart = Math.min(
formatted.length,
selectionStart + (formatted.length - value.length)
);
const newSelectionEnd = newSelectionStart;
// 异步设置光标（确保 DOM 已更新）
setTimeout(() => {
input.setSelectionRange(newSelectionStart, newSelectionEnd);
});
}
</script><input placeholder="e.g. 5200 1234 5678 9012 3456" bind:value="{inputAC}" on:input="{handleInput}">
⚠️ 注意事项：
-
不要使用
on:keydown+setTimeout临时修复：虽能绕过时序问题，但无法处理粘贴、拖拽、右键粘贴等场景，且光标位置易错乱； - 务必清理非数字字符：用户可能粘贴带空格/短横线的内容，需统一归一化；
-
光标同步至关重要：未正确重置
selectionRange会导致输入时光标跳到末尾，严重影响体验； -
考虑防抖或节流？ 此场景无需——
input事件本身频率合理，且格式化逻辑轻量。
? 进阶建议：若需更高鲁棒性（如支持编辑中间段、删除空格后自动重组），可封装为自定义 bind:formattedValue 指令，或使用 use:action 抽离逻辑，提升复用性。
最终效果：用户输入 5200123456789012，实时显示为 5200 1234 5678 9012，且光标始终停留在合理位置，兼容键盘输入、粘贴、剪切、删除等全部操作。
