不能直接用 input 的 type="text" 或 type="tel" 实现混合键盘，因为各端原生行为不可控：ios 下 type="tel" 带 *# 键，android 可能弹出拼音键盘，小程序一律用中文输入法，且无法干预布局、禁用联想或隐藏候选栏。
为什么不能直接用 input 的 type="text" 或 type="tel" 实现混合键盘
因为原生 type 属性在各端行为完全不可控：iOS 下 type="tel" 会带 *# 键，Android 可能弹出拼音键盘，微信小程序则一律走系统默认软键盘（中文输入法），根本不会按你期望只显示数字+字母。更麻烦的是，你无法干预键盘布局、禁用长按联想、隐藏候选栏——这些都不是样式能解决的底层限制。
怎么用 view + @tap 搭建可复用的混合键盘结构
核心是「隐藏原生 input + 手动拼接字符串」，但混合键盘比纯数字键盘多两个关键约束：字母大小写切换、字符合法性过滤（比如不允许输入空格或 emoji）。
- 键盘按钮数组必须预定义字符集，例如：
['1','2','3','4','5','6','7','8','9','0','q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','←','⇧'] - 用
v-for渲染时，对'⇧'单独加 class 控制样式，点击时切换isCapsLock状态，再重新映射字母按钮文本（小写 → 大写） - 输入逻辑里必须做白名单校验：
if (!/^[a-zA-Z0-9]$/.test(val)) return，否则用户可能通过粘贴或调试工具塞入非法字符 - 字母键要区分
shift状态：按下'q'时，若isCapsLock为 true，实际插入'Q'；否则插入'q'
如何避免 iOS 微信下键盘闪退和失焦卡死
这是混合键盘最常翻车的点——因为字母键更多、交互更频繁，focus/blur 调用次数成倍增加，iOS 微信渲染引擎极易崩溃。
- 绝对不要在每次按键后执行
uni.hideKeyboard()或反复调uni.focus()；只在首次打开键盘时调一次uni.focus() - 把原生
input设为opacity: 0; position: absolute; left: -999px;，而不是display: none（后者会导致 iOS 下 ref 节点查不到） - 如果用了
uni.createSelectorQuery()获取 input 节点，务必等页面onReady后再执行，否则返回null；Vue3 中建议用onMounted(() => { nextTick(() => { /* query */ }) }) - 删除键（←）逻辑要防错：
this.value = this.value.slice(0, -1)前先判断this.value.length > 0，否则空字符串调.slice()不报错但无意义
混合键盘的大小写状态和输入值怎么同步到父组件
不能靠 v-model 自动触发，必须手动 emit。尤其注意大小写切换本身不产生输入，但会影响后续字母键行为，这个状态也要透出。
- 组件内用
props.modelValue接收初始值，用emit('update:modelValue', newValue)向上同步 - 额外 emit 一个
caps-change事件，传{ isCapsLock: true }，让父组件可以更新 UI 上的 CapsLock 图标 - 输入框显示值建议用计算属性处理，比如过滤掉连续空格：
displayValue: () => this.modelValue.replace(/\s+/g, ' ').trim() - 如果父组件需要实时校验（如密码强度），应在
@update:modelValue回调里做，而不是监听键盘内部value变化
混合键盘真正难的不是画按钮，而是字符合法性控制、大小写状态同步、以及 iOS 微信下那一连串 focus 相关的渲染陷阱——这些地方一错，就是真机上直接白屏或键盘抽搐。
