vue 3 银行卡号自动格式化需用 v-model 绑定格式化值，@input 解析纯数字并分组加空格，ref 记录/恢复光标位置，@paste/@keydown.delete 处理粘贴删除，限制总长≤23字符。

在 Vue 3 中实现银行卡号自动格式化，核心是监听输入、控制光标位置、按规则分组（通常每 4 位加空格），同时兼容删除、粘贴、选中替换等操作。关键在于用 v-model 的双向绑定 + input 事件 + 手动同步光标位置，避免格式化导致光标跳到末尾。

使用 v-model + input 事件做实时格式化

不推荐直接用 v-model 绑定原始值并靠 computed setter 格式化，因为会丢失光标位置。正确做法是：

• 用 v-model 绑定格式化后的显示值（如 "1234 5678 9012 3456"）
• 在 @input 中解析出纯数字（value.replace(/\s/g, '')），校验长度（通常 ≤ 19 位），再按每 4 位插入空格
• 用 ref 拿到 input 元素，调用 setSelectionRange 恢复光标位置（需记录格式化前的光标位置）

精准维护光标位置（关键难点）

用户在中间修改时，比如把 "1234 5678 9012 3456" 改成 "1234 5678 9012 345X"，光标应在最后；但如果在第 5 位插入，原光标在 "1234| 5678..."，格式化后应落在 "1234| 5678..." 对应位置。实现逻辑：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 在 input 触发前，用 el.selectionStart 记录原始光标位置
• 根据原始光标位置，映射到纯数字字符串中的索引（跳过空格）
• 格式化生成新字符串后，再把该数字索引转回带空格字符串中的位置（每 4 位后加 1 个空格，所以偏移 = Math.floor(index / 4)）
• 调用 el.setSelectionRange(newPos, newPos)

处理粘贴与删除的边界情况

用户可能粘贴一串数字（如 "1234567890123456"），或全选后输入新号码，也可能按 Backspace 删除空格。建议：

• 粘贴时用 @paste.prevent 拦截，event.clipboardData.getData('text') 取纯数字，再格式化
• 删除时（event.inputType === 'deleteContentBackward'），若光标前是空格，应连同空格一起删（即退格跳过空格）
• 始终限制最大长度：纯数字 ≤ 19 位（常见银行卡号长度），格式化后字符串长度 ≤ 23（19 + 4 个空格）

封装成可复用的自定义组件（示例结构）

用 defineComponent + ref + onMounted，暴露 v-model:value 和 @update:value，内部管理格式化逻辑。模板中：

<input ref="inputRef" :value="formattedValue" maxlength="23">

脚本中维护 rawValue（纯数字）、formattedValue（带空格），所有更新都走 updateRawValue 方法，保证单向数据流。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！