Ionic3 监听软键盘的高度

在移动应用开发中，软键盘的弹出和收起会改变屏幕的可用空间，这可能会影响页面布局和用户体验。在Ionic3应用中，正确监听和处理软键盘的高度变化是提升应用质量的重要环节。

为什么需要监听软键盘高度

布局调整：防止输入框被键盘遮挡
用户体验：提供更流畅的交互体验
适配不同设备：不同设备的键盘高度可能不同

方案一：使用 Ionic Native Keyboard 插件

Ionic Native提供了Keyboard插件来处理软键盘相关事件。

安装插件

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard

基本用法

import { Keyboard } from '@ionic-native/keyboard';

constructor(private keyboard: Keyboard) { }

// 监听键盘弹出
this.keyboard.onKeyboardShow().subscribe(() => {
  console.log('键盘弹出');
  // 处理键盘弹出逻辑
});

// 监听键盘收起
this.keyboard.onKeyboardHide().subscribe(() => {
  console.log('键盘收起');
  // 处理键盘收起逻辑
});

// 获取键盘高度
let keyboardHeight = this.keyboard.getKeyboardHeight();
console.log('键盘高度:', keyboardHeight);

在页面中应用

import { Component } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  keyboardHeight: number = 0;
  isKeyboardOpen: boolean = false;

  constructor(
    private keyboard: Keyboard,
    private platform: Platform
  ) {
    this.platform.ready().then(() => {
      this.initKeyboardListeners();
    });
  }

  initKeyboardListeners() {
    // 监听键盘弹出
    this.keyboard.onKeyboardShow().subscribe((e) => {
      this.isKeyboardOpen = true;
      this.keyboardHeight = e.keyboardHeight || 0;
      console.log('键盘弹出，高度:', this.keyboardHeight);
      this.adjustLayout();
    });

    // 监听键盘收起
    this.keyboard.onKeyboardHide().subscribe(() => {
      this.isKeyboardOpen = false;
      this.keyboardHeight = 0;
      console.log('键盘收起');
      this.restoreLayout();
    });
  }

  adjustLayout() {
    // 根据键盘高度调整页面布局
    const elements = document.querySelectorAll('.adjustable-content');
    elements.forEach(element => {
      (element as HTMLElement).style.paddingBottom = `${this.keyboardHeight}px`;
    });
  }

  restoreLayout() {
    // 恢复原始布局
    const elements = document.querySelectorAll('.adjustable-content');
    elements.forEach(element => {
      (element as HTMLElement).style.paddingBottom = '0px';
    });
  }
}

方案二：自定义监听实现

如果不使用插件，也可以通过监听窗口resize事件来实现：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  initialViewportHeight: number;
  isKeyboardOpen: boolean = false;
  keyboardHeight: number = 0;

  ionViewDidLoad() {
    // 记录初始视口高度
    this.initialViewportHeight = window.innerHeight;
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.onWindowResize.bind(this));
  }

  ionViewWillLeave() {
    // 移除事件监听器
    window.removeEventListener('resize', this.onWindowResize.bind(this));
  }

  onWindowResize() {
    const currentHeight = window.innerHeight;
    const heightDifference = this.initialViewportHeight - currentHeight;
    
    // 如果高度差大于某个阈值，认为是键盘弹出
    if (heightDifference > 150) {
      this.isKeyboardOpen = true;
      this.keyboardHeight = heightDifference;
      console.log('键盘弹出，高度:', this.keyboardHeight);
      this.onKeyboardShow();
    } else {
      if (this.isKeyboardOpen) {
        this.isKeyboardOpen = false;
        this.keyboardHeight = 0;
        console.log('键盘收起');
        this.onKeyboardHide();
      }
    }
  }

  onKeyboardShow() {
    // 键盘弹出时的处理逻辑
    document.body.classList.add('keyboard-open');
  }

  onKeyboardHide() {
    // 键盘收起时的处理逻辑
    document.body.classList.remove('keyboard-open');
  }
}

对应的CSS样式：

/* 键盘弹出时的样式调整 */
.keyboard-open .adjustable-content {
  padding-bottom: 0 !important;
}

/* 或者使用JavaScript动态计算的键盘高度 */
.content-with-keyboard {
  transition: padding-bottom 0.3s ease;
}

注意事项

平台差异：iOS和Android在键盘处理上有差异，需要分别测试
性能考虑：频繁的resize事件可能影响性能，可考虑节流处理
生命周期管理：确保在页面销毁时移除事件监听器
兼容性：不同版本的Ionic和Cordova可能有差异

最佳实践

优先使用官方插件：Ionic Native Keyboard插件提供了更稳定的解决方案
合理调整布局：避免页面元素因键盘弹出而产生突兀变化
测试多设备：在不同尺寸和系统的设备上测试效果
优雅降级：为不支持的环境提供备选方案

通过以上方法，你可以在Ionic3应用中有效地监听和处理软键盘的高度变化，提供更好的用户体验。

目录