不能直接用input的type="text"或type="tel"搞定混合键盘，因iOS和Android对原生type属性映射差异大：type="text"在安卓弹全键盘、iOS默认首字母大写；type="tel"在iOS混入*#、Android缺字母键、小程序甚至fallback至默认键盘；且无法控制布局、禁用字符或统一视觉风格，故模拟键盘是唯一可控路径。
为什么不能直接用 input 的 type="text" 或 type="tel" 搞定混合键盘？
iOS 和 Android 对原生 type 属性的软键盘映射差异极大：
- type="text" 在多数安卓机上弹出全键盘（含拼音），iOS 则默认首字母大写 + 英文标点；
- type="tel" 虽带数字，但 iOS 会混入 *# 符号，Android 可能缺字母键，微信小程序里甚至直接 fallback 到默认键盘；
- 更关键的是，你无法控制按键布局、禁用特定字符（比如禁止输入空格或 emoji），也无法统一视觉风格。
所以「模拟键盘」不是偷懒替代方案，而是唯一可控路径。
怎么用 view + @tap 实现可复用的混合键盘组件？
核心是把输入逻辑和 UI 完全解耦，不依赖原生 input 事件：
- 输入框必须设 :disabled="true" 并隐藏（opacity: 0 或 position: absolute; left: -999px），避免系统键盘干扰；
- 键盘按钮用 v-for 渲染，每个键传 keyVal（如 'a'、'5'、'backspace'）；
- 所有输入行为由 handleKeyClick(keyVal) 统一处理，包括：
- 字母转小写（或按需保留大小写状态）
- 数字直接拼接
- 退格键调
this.value = this.value.slice(0, -1)，空值时跳过防止报错
- 支持
'clear' 全清，'enter' 触发确认
- 不要用 this.value += keyVal 字符串拼接——遇到中文输入法组合字、emoji（如 ??）会截断乱码，应走 String.fromCodePoint() 或直接信任用户粘贴（若业务允许）。
如何让键盘在微信小程序和 App 端都稳定不闪退？
iOS 微信是最大雷区，focus/blur 频繁触发极易导致渲染卡死或键盘闪退：
- 只在首次打开键盘时调一次 uni.focus()，后续所有按键操作**禁止再调 focus() 或 blur()**；
- 输入框的 @focus 和 @blur 事件只用于记录状态（如 isFocused = true），不要在里面执行 DOM 查询或重绘；
- 若需动态定位（比如键盘弹起后滚动到输入框），用 uni.onKeyboardHeightChange 监听高度变化，而非依赖 scrollIntoView（H5 有效，App 端基本失效）；
- 跨组件获取 input 节点时，必须等 onReady 后再用 uni.createSelectorQuery()，且加 this.$nextTick 确保节点已挂载，否则返回 null。
样式和交互细节最容易被忽略的三件事
- 键盘按钮的 active 态必须用 hover-class + hover-stay-time="50"，否则真机点击无反馈；
- 字母键建议分两行布局（QWERTY 上排 + 下排），但别硬编码 26 个字母——用数组生成，方便后期加 CapsLock 或切换中英文模式；
- 如果业务需要限制输入内容（如只允许字母+数字+下划线），过滤逻辑必须放在 handleKeyClick 里，而不是靠正则绑定在 input 上——后者在模拟键盘下根本不会触发。
真正麻烦的从来不是画几个格子，而是让每一次按键都像原生一样“不卡、不丢、不崩”。
view + @tap 实现可复用的混合键盘组件？
核心是把输入逻辑和 UI 完全解耦，不依赖原生 input 事件：
- 输入框必须设 :disabled="true" 并隐藏（opacity: 0 或 position: absolute; left: -999px），避免系统键盘干扰；
- 键盘按钮用 v-for 渲染，每个键传 keyVal（如 'a'、'5'、'backspace'）；
- 所有输入行为由 handleKeyClick(keyVal) 统一处理，包括：
- 字母转小写（或按需保留大小写状态）
- 数字直接拼接
- 退格键调
this.value = this.value.slice(0, -1)，空值时跳过防止报错 - 支持
'clear'全清，'enter'触发确认
this.value += keyVal 字符串拼接——遇到中文输入法组合字、emoji（如 ??）会截断乱码，应走 String.fromCodePoint() 或直接信任用户粘贴（若业务允许）。
如何让键盘在微信小程序和 App 端都稳定不闪退？
iOS 微信是最大雷区，focus/blur 频繁触发极易导致渲染卡死或键盘闪退：
- 只在首次打开键盘时调一次 uni.focus()，后续所有按键操作**禁止再调 focus() 或 blur()**；
- 输入框的 @focus 和 @blur 事件只用于记录状态（如 isFocused = true），不要在里面执行 DOM 查询或重绘；
- 若需动态定位（比如键盘弹起后滚动到输入框），用 uni.onKeyboardHeightChange 监听高度变化，而非依赖 scrollIntoView（H5 有效，App 端基本失效）；
- 跨组件获取 input 节点时，必须等 onReady 后再用 uni.createSelectorQuery()，且加 this.$nextTick 确保节点已挂载，否则返回 null。
样式和交互细节最容易被忽略的三件事
- 键盘按钮的 active 态必须用 hover-class + hover-stay-time="50"，否则真机点击无反馈；
- 字母键建议分两行布局（QWERTY 上排 + 下排），但别硬编码 26 个字母——用数组生成，方便后期加 CapsLock 或切换中英文模式；
- 如果业务需要限制输入内容（如只允许字母+数字+下划线），过滤逻辑必须放在 handleKeyClick 里，而不是靠正则绑定在 input 上——后者在模拟键盘下根本不会触发。
真正麻烦的从来不是画几个格子，而是让每一次按键都像原生一样“不卡、不丢、不崩”。
active 态必须用 hover-class + hover-stay-time="50"，否则真机点击无反馈；
- 字母键建议分两行布局（QWERTY 上排 + 下排），但别硬编码 26 个字母——用数组生成，方便后期加 CapsLock 或切换中英文模式；
- 如果业务需要限制输入内容（如只允许字母+数字+下划线），过滤逻辑必须放在 handleKeyClick 里，而不是靠正则绑定在 input 上——后者在模拟键盘下根本不会触发。
真正麻烦的从来不是画几个格子，而是让每一次按键都像原生一样“不卡、不丢、不崩”。
