键盘可见时，键盘会隐藏页脚中的输入字段

Question

在我的离子项目中，在聊天页面中，我在页脚部分包含了一个输入框，但是当键盘打开以输入隐藏的输入框时。

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>

Answer 1

使用Ionic Keyboard Plugins

在终端：

ionic cordova plugin add ionic-plugin-keyboard

npm install --save @ionic-native/keyboard

加入：app.module.ts

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

providers: [
    ...
    Keyboard
    ...
  ]

in：chart.html

   <ion-footer>
      <ion-toolbar>
        <ion-grid>
          <ion-row>
            <ion-col col-10>
              <ion-input type="text" (focus)="showKeyboard()" 
                (focusout)="closeKeyboard()" 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>

in：chart.ts

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

constructor(private keyboard: Keyboard) { }

   showKeyboard() {
      this.keyboard.show();
    }

   closeKeyboard() {
       this.keyboard.close();
    }