uni-app 键盘监听问题:uni.onKeyboardHeightChange无法监听数字键盘高度
uni-app 键盘监听问题:uni.onKeyboardHeightChange无法监听数字键盘高度
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | 11 | HBuilderX |
操作步骤:
- 通过uniapp编译成微信小程序,然后在微信小程序中点击input,弹出数字键盘,滑动或者其他操作使input失去焦点,uni.onKeyboardHeightChange监听不到数字键盘高度
预期结果:
- onKeyboardHeightChange事件可以监听到数字键盘高度
实际结果:
- 失去焦点onKeyboardHeightChange监听不到,目前原生微信小程序onKeyboardHeightChange事件没有这个问题
bug描述:
- uniapp编译后的微信小程序数字键盘失去焦点,uni.onKeyboardHeightChange事件回调不会触发
一样的,不行,不是数字键盘就可以监听到键盘高度事件,微信那边测试了下在数字键盘是可以监听到的
回复 3***@qq.com: 确实 在微信端数字键盘监听不到消失后的高度 应该是微信的问题把 微信社区很早就提过这个问题 https://developers.weixin.qq.com/community/develop/doc/0008c6095ac440f9ffdcc1e4156400?highLine=%E7%9B%91%E5%90%AC%E6%95%B0%E5%AD%97%E9%94%AE%E7%9B%98
回复 3***@qq.com: 或者你就监听失去焦点的事件 失去焦点后键盘肯定也隐藏了 高度为0
回复 爱豆豆: 微信目前是可以的,不要甩锅给微信,哈哈哈哈
回复 爱豆豆: 多个input 交互不好,会闪
回复 3***@qq.com: 编译到小程序端就是微信小程序代码 这也没甩锅啊 uni.onkeyboardheightchange 编译后为wx. onkeyboardheightchange 你可以创建一个原生项目 用微信原生代码试下 是一样的效果 数字键盘隐藏后不乎触发onkeyboardheightchange
你说的 微信目前是可以的 是啥意思 没懂?
回复 爱豆豆: 是的 是好是坏 服了
在 uni-app
中,uni.onKeyboardHeightChange
确实可以用来监听软键盘高度变化,但默认情况下,它主要针对的是全键盘高度变化。对于数字键盘(或其他类型的特定键盘),有时可能不会触发该事件,或者触发时的高度信息与预期不符。这通常是由于系统键盘行为或 uni-app
框架限制导致的。
虽然 uni-app
官方文档并未明确说明如何针对数字键盘进行特殊处理,但我们可以通过一些变通方法来实现类似的功能。下面是一个可能的解决方案,它结合了 input
事件的监听和条件判断来处理不同类型的键盘:
// 在页面的 onLoad 或 mounted 生命周期中注册键盘高度变化监听
export default {
data() {
return {
keyboardHeight: 0,
};
},
onLoad() {
// 监听键盘高度变化
uni.onKeyboardHeightChange(this.handleKeyboardHeightChange);
// 监听输入框的 focus 和 blur 事件来判断键盘类型
this.$refs.inputRef.addEventListener('focus', this.handleInputFocus);
this.$refs.inputRef.addEventListener('blur', this.handleInputBlur);
},
methods: {
handleKeyboardHeightChange(res) {
// 通常这里处理全键盘高度变化
this.keyboardHeight = res.height;
console.log('Keyboard height changed:', this.keyboardHeight);
},
handleInputFocus(event) {
// 可以在这里做一些预处理,比如标记输入框已聚焦
console.log('Input focused');
},
handleInputBlur(event) {
// 当输入框失去焦点时,根据条件判断是否是数字键盘触发
// 由于直接判断数字键盘高度变化较难,我们可以通过其他方式间接处理
// 比如,根据输入内容类型(数字、字母等)来假定键盘类型
setTimeout(() => {
// 假设我们在输入框失去焦点后0.5秒认为键盘已收起
// 这里可以根据实际情况调整时间或逻辑
if (this.isNumericKeyboard()) {
// 处理数字键盘收起后的逻辑
console.log('Numeric keyboard assumed to be closed');
// 可以重置 keyboardHeight 或执行其他操作
this.keyboardHeight = 0;
}
}, 500);
},
isNumericKeyboard() {
// 这里需要实现一个逻辑来判断当前是否是数字键盘
// 比如,通过输入内容的正则表达式匹配,或者根据页面逻辑预设
// 这里仅为示例,直接返回 true 表示假定为数字键盘场景
return true; // 或者根据实际需求实现逻辑
},
},
};
请注意,上述代码中的 isNumericKeyboard
方法需要根据实际业务逻辑进行实现,因为 uni-app
本身不提供直接判断键盘类型的方法。此外,由于软键盘行为可能因设备和操作系统版本而异,因此这种方法的可靠性可能受到限制。在实际应用中,建议结合用户反馈和设备测试进行调整。