Клавиатура скрывает поле ввода в нижнем колонтитуле, когда клавиатура видна

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 Плагины клавиатуры

в терминале:

ionic cordova plugin add ionic-plugin-keyboard

npm install --save @ionic-native/keyboard

добавьте: app.module.ts

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

providers: [
    ...
    Keyboard
    ...
  ]

в: 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>

в: chart.ts

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

constructor(private keyboard: Keyboard) { }

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

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