纯前端车牌键盘需用div模拟+setselectionrange精确控光标，按省份/字母/数字规则动态切换键位，支持新能源等多类型配置，真机测试防ios光标漂移与android事件丢失。
怎么用纯 HTML + JS 实现可切换省份/字母/数字的车牌键盘
纯前端实现车牌键盘，核心不是“画个按钮”，而是控制输入焦点、拦截默认行为、按车牌规则动态切换键位。浏览器原生 input 不支持自定义软键盘，所以必须用 div 模拟键盘区域 + contenteditable 或受控 input 配合 setSelectionRange 精确光标定位。
常见错误是直接绑定 click 后用 value += '京'，结果在中间插入时错位、无法退格、不兼容 iOS 输入法切换。正确做法是：始终读取当前光标位置，用 value.slice(0, pos) + key + value.slice(pos) 拼接，并立刻重置光标到新位置。
- 省份键（京、沪、粤…）只允许在第 1 位输入，且输入后自动跳到第 2 位
- 第 2 位固定为字母（A–Z，排除 I、O），且不能是数字
- 第 3–7 位支持字母（A–Z，含 I、O）和数字（0–9），共 5 位，满员后禁止继续输入
- 退格键需区分：光标在开头不响应；在中间或末尾时，删掉左侧字符并左移光标
为什么车牌键盘必须手动管理光标位置，而不是用 input.value += key
因为车牌有强格式约束，用户可能点击任意位置编辑（比如修改第 4 位），而 input.value += key 总是追加到末尾，完全丢失上下文。iOS Safari 还会在软键盘唤起时重置光标到末尾，导致体验断裂。
必须用 input.setSelectionRange() 主动控制。实操中要先用 input.selectionStart 获取当前光标，再计算插入/删除后的新光标位置。例如在第 3 位插入 'A'，原值为 '京A1234'（长度 6），光标在索引 3，则新值为 '京A' + 'A' + '234' = '京AA234'，新光标应设为 4（即插入点右侧）。
- 不读
selectionStart直接拼接 → 光标漂移、输入错位 - 没处理 iOS 的
input失焦重置 → 键盘输入后光标跳回末尾 - 未限制最大长度为 7 → 可能输成
'京A123456'这种非法值
如何让键盘响应区适配不同车牌类型（新能源/小型车/使馆牌）
新能源车牌（如 京AD12345）共 8 位，第 3 位固定为 D 或 F，且第 4–8 位为 5 位数字+字母混合（但首字符不能是 0）。小型车仍是 7 位。这意味着键盘的键位逻辑和长度校验必须可配置，不能硬编码 if (len === 7) {...}。
推荐用配置对象驱动键盘行为：
const plateRules = {
'blue': { length: 7, provincePos: 0, letterPos: [1], digitPos: [2,3,4,5,6] },
'green': { length: 8, provincePos: 0, letterPos: [1], fixedChar: {2: ['D','F']}, digitPos: [3,4,5,6,7] }
};
渲染键盘时，根据当前选中的车牌类型（由用户切换按钮或前缀自动识别）加载对应规则，动态生成第 2 行按键（是否显示 D/F）、限制第 3 位可选字符、调整最大长度判断。
- 把规则写死在事件处理器里 → 后续扩展港澳/警用车牌时要大改逻辑
- 用 class 名控制显隐（如
.key-d）→ 增加 CSS 耦合，JS 无法感知可用性 - 未监听
input值变化反推类型（如输入'京AD'后自动切 green 规则）→ 用户需手动点切换按钮，体验割裂
移动端真机测试最容易忽略的三个坑
在 Chrome DevTools 模拟器里跑通不等于手机能用。真实环境里，iOS 的 input 在 contenteditable=false 下会禁用部分事件，Android 某些定制 ROM 会吞掉 touchstart。最稳的方式是：所有按键用 ontouchstart + onmousedown 双绑定，且禁止默认长按选中。
- 没加
user-select: none→ 长按弹出“复制/搜索”菜单，遮挡键盘 - 只绑
click→ iOS 点击延迟 300ms，连续点击易漏触发 - 键盘容器没设
position: fixed且未处理 viewport 缩放 → 键盘随页面滚动消失，或在 iPhone X+ 上被安全区截断
真正麻烦的不是写出来，是让光标在各种机型上都停在该停的位置，且退格键不误删前面的省份字。这需要反复在真机上测光标偏移量，而不是依赖理论计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
