不能直接用 type="text"+v-model 绑定六格数组，因h5与小程序对type="text"处理不一致：h5触发中文输入法等非预期字符，小程序截断粘贴、丢失焦点；多input方案在ios导致键盘闪退、android光标错位；正确做法是单隐藏input接收输入，切片映射显示，提交时正则校验 /^[a-za-z0-9]{6}$/。
为什么不能直接用 type="text" + v-model 绑定六格数组？
因为 H5 和小程序对 input 的 type="text" 处理不一致：H5 会触发中文输入法、空格、符号等非预期字符；小程序则可能截断粘贴、丢失焦点或无法响应长按删除。直接拆成 6 个独立 input 更糟——iOS 上频繁切换 focus 会导致键盘闪退，Android 则光标错位。真实踩坑点是：你以为在控制「每个格子一个字符」，实际在对抗平台原生输入逻辑。
推荐方案：单个隐藏 input + 动态映射显示
核心不是“怎么画六个框”，而是“怎么让系统输入行为可控”。必须用一个 input 接收所有输入，再把值切片映射到 view 上：
-
input设type="text"（不是number），maxlength="6"，password="false" - 绑定
v-model="rawCode"，不手动维护数组状态 - 显示层用
v-for="(item, i) in 6"渲染view，内容取rawCode[i]，高亮条件为i === rawCode.length - 删除逻辑完全交给原生——用户按退格键，
rawCode自动缩短，显示自动重排，无需监听keydown或判断event.inputType
这样既支持字母数字混合（如 "A7xK9m"），又规避了多 input 焦点混乱问题。注意：别给 input 加 style="opacity:0"，要用 position: absolute; left: -999px; 隐藏，否则某些安卓 WebView 会失效。
字母数字混合校验必须在提交时做，不能靠 input 属性限制
input 的 pattern 或 inputmode 在 uni-app 各平台兼容性极差：H5 基本无效，小程序不识别 pattern，APP 端甚至会禁用软键盘。正确做法是：
- 允许用户任意输入（包括粘贴、中文、符号）
- 在
@blur或提交按钮点击时，用正则校验：/^[a-zA-Z0-9]{6}$/.test(rawCode) - 校验失败就清空
rawCode并提示，不要试图在输入过程中拦截——那会破坏用户体验且不可靠
尤其注意：用户可能粘贴 "abc123" 但中间带空格，得先 .replace(/\s/g, '') 再校验长度和字符集。
光标模拟和样式高亮容易忽略的细节
所谓“光标”只是视觉反馈，不是真光标。常见错误是只靠 rawCode.length === i 判断高亮，但没处理两种边界：
- 当
rawCode为空时，第一个格子应高亮（i === 0），否则用户点哪儿都不触发 focus - 当
rawCode已满 6 位，再点任意格子，应聚焦并允许删除（此时rawCode.length还是 6，但需手动设置focus状态并把光标定位到最后）
所以点击格子的 handler 必须同时做两件事：this.$nextTick(() => this.$refs.hiddenInput.focus())，以及确保 hiddenInput 的 selectionStart 和 selectionEnd 被设为 rawCode.length（H5 可行，小程序需用 uni.createSelectorQuery 模拟，APP 端基本靠 platform 判断降级）。
