直接用input[type="text"]做车牌输入会出问题，因其无法拦截非法字符、自动跳转光标或适配新能源号牌的“·”分隔符，导致粘贴、中英文切换等引发格式错乱，后端校验沦为被动兜底。
为什么直接用 input[type="text"] 做车牌输入会出问题
因为车牌有强格式约束（如“京A12345”“粤B·D6789E”），而普通文本框无法拦截非法字符、无法自动跳转光标、也无法适配新能源号牌的“·”分隔符。用户随手粘贴、长按输入、切换中英文状态都会导致格式错乱，后端校验变被动兜底。
常见错误现象：oninput 里用正则强行截断，结果退格键失灵、光标跑到开头、新能源车的“·”被删掉；或者用 contenteditable 自己造输入框，结果 iOS 键盘不唤起、focus 失效。
- 必须拦截
keydown而非仅靠input，否则已触发的非法按键（如 `F1`、`Tab`、中文标点）无法阻止 - 新能源号牌的“·”是 Unicode
\u00b7（不是英文点或顿号），需显式允许且固定位置（第3位后） - 首两位为汉字+字母组合（如“沪C”），不能简单用
pattern，需区分地域码和序号段
onkeydown 拦截逻辑怎么写才不卡光标
核心是：只放行明确需要的键，其余一律 event.preventDefault()；同时对退格、删除、方向键、Tab 等控制键保留原生行为——否则用户根本没法编辑。
示例关键判断：
if (event.key === 'Backspace' || event.key === 'Delete' ||
event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
event.key === 'Tab') return;
<p>// 允许：汉字（地域码）、大写字母（A-Z）、数字（0-9）、中间那个点
const validKeys = /^[\u4e00-\u9fa5A-Z0-9\u00b7]$/;
if (!validKeys.test(event.key)) {
event.preventDefault();
return;
}</p><p>// 额外限制：第3位后只能是“·”，且只允许出现1次
if (input.value.length === 2 && event.key !== '\u00b7') {
event.preventDefault();
}
</p>
- 不要用
keyCode或which——已废弃，且在不同键盘布局下返回值不可靠 - 不要在
oninput里用value = value.replace(...)，这会导致 iOS 光标重置到末尾 - 如果用了 Vue/React，记得在事件处理函数里加
event.stopPropagation()，避免框架劫持后干扰原生行为
怎么让软键盘自动弹出并聚焦到正确位置
移动端最常踩的坑：点击自定义键盘按钮后，input 没 focus，键盘不弹；或者 focus 了但光标停在开头，用户每输一个字都要手动拖拽光标。
实操要点：
- 给
input加autofocus属性没用——它只在页面加载时生效，且 iOS Safari 会忽略 - 必须显式调用
input.focus()，且要在用户真实交互（如touchend）回调里执行，不能放在异步定时器里 - 设置光标位置用
input.setSelectionRange(start, end)，比如输完第2位汉字后，自动把光标移到第3位（即setSelectionRange(2, 2)），为输入“·”做准备 - Android 微信 WebView 对
focus()支持差，可加input.setAttribute('readonly', 'readonly')再立刻移除，触发重绘
为什么自己画键盘比调用系统键盘更可控
系统键盘无法限制字符集、无法禁用空格/换行/符号页，也不支持“京”“沪”“粤”等一键地域码按钮。自绘键盘本质是 div + button，配合上面的 keydown 拦截逻辑，才能做到真正闭环。
最小可用结构示例：
<div class="plate-keyboard"> <button data-key="京">京</button> <button data-key="A">A</button> <button data-key="1">1</button> <button data-key="·">·</button> <!-- 其他按钮... --> </div>
- 每个
button绑定click和touchend，触发input.setRangeText(key, start, end, 'end')插入字符并定位光标 - 地域码按钮（如“粤”“鄂”）应高亮显示，其他字母数字灰阶，视觉上强化输入节奏
- 注意：iOS Safari 在
input失焦状态下点击按钮，focus()可能无效，需在按钮事件里先input.focus()，再setRangeText
复杂点在于新能源号牌的“·”插入时机和位置校验——它不是可选的，是强制分隔符，且只允许出现在第3位后、第7位前，这个边界条件很容易漏判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
