Ionic 7键盘遮挡底部输入框，无法正常输入问题求助

问题详情 #

使用Ionic 7开发应用时，底部区域的输入框始终被弹出的键盘遮挡，即使隐藏键盘后再次点击该输入框，键盘仍会覆盖输入框，导致无法正常输入内容。

项目配置 #

{
  "name": "baniya",
  "version": "0.0.1",
  "author": "Moblize.it LLC",
  "homepage": "https://baniya.app",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/fire": "^7.5.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor-community/apple-sign-in": "^5.0.0",
    "@capacitor/android": "5.0.3",
    "@capacitor/app": "5.0.2",
    "@capacitor/browser": "^5.0.6",
    "@capacitor/core": "5.0.3",
    "@capacitor/haptics": "5.0.2",
    "@capacitor/ios": "5.0.3",
    "@capacitor/keyboard": "5.0.2",
    "@capacitor/status-bar": "5.0.2",
    "@codetrix-studio/capacitor-google-auth": "^3.3.2",
    "@ionic/angular": "^7.0.0",
    "chart.js": "^4.3.0",
    "chartjs-gauge": "^0.3.0",
    "firebase": "^9.22.2",
    "ionicons": "^7.0.0",
    "moment": "^2.29.4",
    "rxjs": "~7.5.0",
    "swiper": "^9.3.2",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/assets": "^2.0.4",
    "@capacitor/cli": "5.0.3",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "^4.8.4"
  },
  "description": "Baniya App by Moblize.it LLC"
}

解决方案 #

针对Ionic 7 + Capacitor 5的环境，可通过以下步骤解决：

1. 配置Capacitor Keyboard插件 #

在app.component.ts中初始化键盘插件，设置正确的调整模式：

import { Component } from '@angular/core';
import { Keyboard } from '@capacitor/keyboard';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    // 启用键盘工具栏，帮助用户关闭键盘
    Keyboard.setAccessoryBarVisible({ isVisible: true });
    // 使用原生模式调整页面，适配键盘弹出
    Keyboard.setResizeMode({ mode: 'native' });
  }
}

2. 修改Android平台配置 #

在android/app/src/main/AndroidManifest.xml的<activity>标签中添加windowSoftInputMode属性：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@style/AppTheme.NoActionBarLaunch"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:windowSoftInputMode="adjustResize">

3. 调整页面布局与样式 #

确保输入框所在页面使用ion-content包裹，并为底部输入框预留空间：

<ion-content class="ion-padding">
  <!-- 页面其他内容 -->
  <div class="bottom-input-wrapper">
    <ion-input placeholder="请输入内容"></ion-input>
  </div>
</ion-content>

添加对应的全局或页面样式：

.bottom-input-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: var(--ion-background-color);
  border-top: 1px solid var(--ion-color-light);
}

ion-content {
  /* 留出底部输入框的高度空间，避免内容被遮挡 */
  padding-bottom: 80px;
}

4. 监听键盘事件手动调整滚动 #

在包含底部输入框的页面组件中，监听键盘显示/隐藏事件，手动调整页面滚动位置：

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { Keyboard } from '@capacitor/keyboard';

@Component({
  selector: 'app-bottom-input-page',
  templateUrl: './bottom-input-page.page.html',
  styleUrls: ['./bottom-input-page.page.scss'],
})
export class BottomInputPagePage {
  @ViewChild(IonContent) content: IonContent;

  ngOnInit() {
    // 键盘弹出时滚动到输入框位置
    Keyboard.addListener('keyboardWillShow', (info) => {
      this.content.scrollByPoint(0, info.keyboardHeight, 300);
    });

    // 键盘隐藏时恢复滚动位置
    Keyboard.addListener('keyboardWillHide', () => {
      this.content.scrollToTop(300);
    });
  }
}

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