Ionic聊天页键盘弹出时底部footer输入框被隐藏问题求助

问题场景 #

你的聊天页面底部输入框在键盘弹出时被遮挡，相关截图如下：
正常显示状态：

键盘弹出时被遮挡：

对应的chat.html代码：

<ion-footer> 
  <ion-toolbar> 
    <ion-grid> 
      <ion-row> 
        <ion-col col-10> 
          <ion-input type="text" placeholder="Type a message" [(ngModel)]="message" name="message"></ion-input> 
        </ion-col> 
        <ion-col col-2 (click)="sendMessage()"> 
          <ion-icon name="paper-plane"></ion-icon> 
        </ion-col> 
      </ion-row> 
    </ion-grid> 
  </ion-toolbar> 
</ion-footer>

这是Ionic移动端项目里很常见的键盘适配问题，我给你几个靠谱的解决思路，按顺序尝试就行：

1. 用Ionic键盘插件实现自动滚动（最推荐） #

首先确保你安装了官方的键盘插件，没装的话先执行这两个命令：

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

接着在app.module.ts里把它注册到providers中：

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

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    ...
    Keyboard // 添加这一行
  ],
  bootstrap: [...]
})
export class AppModule {}

然后在你的聊天页面组件（比如chat.page.ts）里，监听键盘的弹出/收起事件，让页面自动滚动到底部，确保输入框可见：

import { Component, ViewChild, OnInit } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard/ngx';
import { Content } from '@ionic/angular';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {
  @ViewChild(Content) content: Content;
  message: string;

  constructor(private keyboard: Keyboard) {}

  ngOnInit() {
    // 键盘弹出时滚动到底部
    this.keyboard.onKeyboardShow().subscribe(() => {
      setTimeout(() => {
        this.content.scrollToBottom(300); // 300ms是滚动动画时长，可调整
      }, 100); // 延迟一下确保键盘完全弹出
    });

    // 键盘收起时也滚回底部，保持布局一致
    this.keyboard.onKeyboardHide().subscribe(() => {
      this.content.scrollToBottom(300);
    });
  }

  sendMessage() {
    // 你的发送消息逻辑
  }
}

2. 调整config.xml配置开启自动适配 #

打开项目根目录下的config.xml，添加这两个偏好设置，让Ionic自动处理键盘与页面的适配：

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="ionic" />

KeyboardResizeMode的可选值说明：

• native: 用系统原生的调整方式，兼容性较好
• ionic: Ionic自定义的逻辑，会自动调整页面内容高度
• body: 仅调整body元素的高度
• none: 不做任何调整，也就是默认可能出现遮挡的情况

3. CSS样式辅助调整 #

如果上面的方法都没解决，试试给footer加固定定位，同时给body在键盘弹出时加底部内边距：

ion-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10; // 确保在其他内容上方
}

// 键盘弹出时Ionic会给body加keyboard-open类
body.keyboard-open {
  padding-bottom: 220px; // 数值根据你的键盘高度调整，可多试几次
}

另外要注意：你的聊天消息列表一定要放在<ion-content>标签里，Ionic的滚动系统只有在这个容器内才能正常工作，完整的页面结构应该是头部+内容区+底部，这样适配起来才会更顺畅。

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