Ionic 3登录表单底部内容随键盘弹出上移问题求助

Hey there! I’ve run into this exact issue with Ionic 3 before—fixed bottom elements jumping up when the keyboard pops can be super frustrating. Let’s go through a few reliable solutions that should get your login screen behaving as expected.

Solution 1: Use Ionic’s Built-in ion-footer Component (Recommended) #

Ionic’s ion-footer is designed to handle viewport changes like keyboard events out of the box, so ditching your custom fixed positioning for this official component is the cleanest fix. Here’s how to adjust your code:

Updated HTML #

<ion-content text-center class="login">
  <form id="loginForm" [formGroup]="valForm" (submit)="OnLogin($event, valForm.value)">
    <div padding class="animated fadeIn center-On-Screen">
      <img class="logo" src="assets/img/logo.png">
      <ion-list padding>
        <ion-item>
          <ion-input type="email" placeholder="E-mail" class="form-control" name="email" autocomplete="off" formControlName="email" required></ion-input>
        </ion-item>
        <ion-item>
          <ion-input type="password" placeholder="Password" name="password" formControlName="password" required></ion-input>
        </ion-item>
        <ion-item>
          <div class="forgotpass" item-right (click)="Forgotpass()">Forgot password</div>
        </ion-item>
      </ion-list>
    </div>
  </form>
</ion-content>

<!-- Wrap all bottom content in ion-footer -->
<ion-footer>
  <div class="signin-content btn-holder">
    <div class="animated bounceInUp">
      <!-- Link the button to the form using its ID -->
      <button ion-button block outline color="light" type="submit" form="loginForm" [disabled]="!valForm.valid">Sign In</button>
    </div>
  </div>
  <div class="footer-content btn-holder">
    <div class="animated bounceInUp">
      <button ion-button block color="facebook" (click)="doFbLogin()">Facebook</button>
    </div>
  </div>
  <div class="footer-signup signup">
    <div class="animated bounceInUp">
      <a color="light" (click)="Register()">New Here? <strong>Sign Up</strong></a>
    </div>
  </div>
</ion-footer>

Simplified CSS (No Fixed Positioning Needed) #

.signin-content {
  width: 100%;
  padding: 0 16px;
}

.footer-content {
  width: 100%;
  padding: 0 16px;
  margin-top: 8px;
}

.footer-signup {
  width: 100%;
  text-align: center;
  padding: 16px 0;
}

This works because ion-footer stays anchored to the bottom of the viewport automatically, even when the keyboard resizes the screen.

Solution 2: Manually Adjust Position with Keyboard Events #

If you need to keep your custom fixed positioning, you can use the Ionic Native Keyboard plugin to dynamically adjust the bottom values when the keyboard shows/hides.

Step 1: Ensure the Keyboard Plugin is Set Up #

Make sure you have the plugin installed and configured:

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

Add Keyboard to your app.module.ts providers array.

Step 2: Listen to Keyboard Events in Your Page #

Update your page’s TypeScript to handle keyboard show/hide:

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

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  constructor(private keyboard: Keyboard) {}

  ionViewDidLoad() {
    // Adjust bottom positions when keyboard shows
    this.keyboard.onKeyboardShow().subscribe(res => {
      const kbHeight = res.keyboardHeight;
      // Replace percentage values with fixed pixels for easier calculation
      document.querySelector('.signin-content').style.bottom = `${80 + kbHeight}px`;
      document.querySelector('.footer-content').style.bottom = `${40 + kbHeight}px`;
      document.querySelector('.footer-signup').style.bottom = `${10 + kbHeight}px`;
    });

    // Reset positions when keyboard hides
    this.keyboard.onKeyboardHide().subscribe(() => {
      document.querySelector('.signin-content').style.bottom = '80px';
      document.querySelector('.footer-content').style.bottom = '40px';
      document.querySelector('.footer-signup').style.bottom = '10px';
    });
  }
}

Update your CSS to use fixed pixel values instead of percentages:

.signin-content { position: fixed; bottom: 80px; width: 100%; }
.footer-content { position: fixed; bottom: 40px; width: 100%; }
.footer-signup { position: fixed; bottom: 10px; width: 100%; }

Solution 3: Tweak config.xml Settings #

Sometimes adjusting the keyboard behavior in config.xml can resolve the issue. Try adding these preferences:

<!-- iOS Settings -->
<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="native" />

<!-- Android Settings -->
<preference name="android-windowSoftInputMode" value="adjustPan" />

If adjustPan doesn’t work, try adjustResize instead—different apps can behave differently depending on their layout.

Also, remove the ion-fixed directive from your HTML elements, as it can conflict with custom position: fixed styling in Ionic 3.

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