Ionic 3 Keyboard插件onKeyboardShow事件不触发问题求助

我之前也碰到过一模一样的问题！@ionic-native/keyboard的onKeyboardShow事件死活不触发，反复试了好几次都没反应，后来一步步排查才解决，给你分享几个关键的排查点和解决方案：

1. 先确认依赖安装完整且版本匹配 #

@ionic-native/keyboard依赖cordova原生插件，必须确保两个都装对了：

• 安装cordova插件：

  ionic cordova plugin add cordova-plugin-keyboard
  

• 安装对应的npm包（Ionic 4+请用带ngx的版本）：

  npm install @ionic-native/keyboard@5.x --save
  

  注意：如果你的Ionic版本是3及以下，不需要加ngx，直接安装@ionic-native/keyboard@4.x即可。

2. 必须在真机/模拟器测试，浏览器环境无效 #

这个插件是基于Cordova的原生能力，浏览器里的键盘是网页级别的，不会触发原生插件的事件！一定要把代码打包到真机或者iOS/Android模拟器里测试，浏览器调试肯定看不到Keyboard Up日志。

3. 检查服务注入是否正确 #

确保你在组件里的注入路径和方式是对的：

// 注意路径里的/ngx（Ionic 4+需要）
import { Keyboard } from '@ionic-native/keyboard/ngx';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
})
export class ChatPage {
  constructor(private keyboard: Keyboard) { 
    // 在这里或者ngOnInit里订阅事件
    this.keyboard.onKeyboardShow().subscribe(show => {
      console.log('Keyboard Up');
      this.scrollToBottom();
    });
  }
}

如果漏了/ngx，服务注入会失败，自然不会触发事件。

4. 试试原生window事件监听（更可靠的替代方案） #

如果上面的步骤都试过还是不行，可以直接监听原生的键盘事件，这在很多场景下比@ionic-native的封装更稳定：

import { OnInit, OnDestroy } from '@angular/core';

export class ChatPage implements OnInit, OnDestroy {
  ngOnInit() {
    // 监听键盘即将弹出事件
    window.addEventListener('keyboardWillShow', () => {
      console.log('Keyboard Up');
      this.scrollToBottom();
    });
    // 可选：监听键盘隐藏事件
    window.addEventListener('keyboardWillHide', () => {
      console.log('Keyboard Down');
    });
  }

  ngOnDestroy() {
    // 组件销毁时移除监听，避免内存泄漏
    window.removeEventListener('keyboardWillShow');
    window.removeEventListener('keyboardWillHide');
  }
}

5. 检查config.xml的相关配置 #

确保config.xml里没有禁用键盘的自动唤起或者相关事件：

<!-- 允许点击输入框自动唤起键盘，这个设置不影响事件，但如果是true可能需要手动触发键盘 -->
<preference name="KeyboardDisplayRequiresUserAction" value="false" />

按照上面的步骤排查，应该就能解决事件不触发的问题了！

内容的提问来源于stack exchange，提问作者user3024827