Ionic3 iOS端聚焦输入框时表单被键盘遮挡，输入后才恢复

先确认你的环境信息：

cli 包：(/usr/local/lib/node_modules)
@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
全局包：
Cordova CLI : 7.0.1
本地包：
@ionic/app-scripts : 1.3.12
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.5.0
系统信息：
ios-deploy : 1.9.2
Node : v6.11.2
npm : 3.10.10
OS : macOS High Sierra
Xcode : Xcode 9.0 Build version 9A235

你的问题是：iOS端聚焦输入框时表单无法自动上移至键盘上方，直到输入内容后才移动，但Android端正常。

看了你的代码，核心问题大概率是外层的position: absolute布局导致Ionic的键盘插件无法正确识别表单位置，再加上iOS本身的键盘适配机制和Android存在差异，才出现了这种不一致的情况。下面是具体的解决步骤：

1. 确保Ionic Keyboard插件正确配置 #

首先检查是否安装了官方键盘插件，若未安装或版本老旧，先更新配置：

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

接着在app.module.ts中导入并添加到providers数组：

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

@NgModule({
  ...
  providers: [
    ...
    Keyboard
  ]
})
export class AppModule {}

最后在config.xml中添加关键的键盘适配配置：

<!-- 允许键盘调整webview大小 -->
<preference name="KeyboardResize" value="true" />
<!-- 使用原生方式调整，适配iOS特性 -->
<preference name="KeyboardResizeMode" value="native" />

2. 重构布局，移除绝对定位 #

你当前用position: absolute; bottom: 0px;固定表单在底部的方式，会让元素脱离正常文档流，导致Ionic键盘插件无法正确计算元素位置。建议改用Ionic原生的flex布局实现底部固定效果：

修改你的HTML代码：

<ion-content class="login-content">
  <div class="form-wrapper">
    <img src="assets/login/welcome_login_bg.png" />
    <ion-list>
      <form [formGroup]="loginForm">
        <ion-item no-padding class="firstItem">
          <ion-input 
            [(ngModel)]="username" 
            formControlName="username" 
            type="email" 
            spellcheck="false" 
            autocapitalize="off">
          </ion-input>
        </ion-item>
        <ion-item no-padding class="borderlineremove">
          <ion-input 
            [(ngModel)]="password" 
            formControlName="password" 
            clearOnEdit="false" 
            type="password" 
            spellcheck="false" 
            autocapitalize="off">
          </ion-input>
        </ion-item>
        <button class="loginForm" ion-button (click)="validateUser()" full color="danger">
          <b>Sign In</b>
        </button>
        <ion-row>
          <div class="forgotPwd"><span (click)="forGotPwd()">Forgot Password?</span></div>
          <div class="signUp"><span (click)="registration()">Sign Up</span></div>
        </ion-row>
      </form>
    </ion-list>
  </div>
</ion-content>

添加对应的SCSS样式：

.login-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 让内容固定在底部 */
  padding: 0 16px;
}

.form-wrapper {
  width: 100%;
}

这种布局既实现了表单在底部的需求，又保留了正常文档流，让Ionic键盘插件能正确监听并调整页面位置。

3. 备选方案：手动监听键盘事件（若上述方法无效） #

如果重构布局后问题仍存在，可以手动监听键盘弹出/收起事件，强制滚动到表单位置：

在页面TS文件中添加：

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

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  @ViewChild(Content) content: Content;

  constructor(private keyboard: Keyboard) {}

  ionViewDidLoad() {
    // 监听键盘弹出事件
    this.keyboard.onKeyboardShow().subscribe(() => {
      // 延迟滚动，确保键盘完全弹出
      setTimeout(() => {
        this.content.scrollToBottom();
      }, 150);
    });

    // 监听键盘收起事件
    this.keyboard.onKeyboardHide().subscribe(() => {
      this.content.scrollToTop();
    });
  }
}

这样当键盘弹出时，页面会自动滚动到底部，让输入框保持在键盘上方。

按照这个步骤操作，应该就能解决iOS上的键盘适配问题啦～

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