web-dev-qa-db-ja.com

Ionic 4キーボードは入力フィールドをカバーします

Ionic 4のアプリがあり、その中に入力があるフォームがあります。
ユーザーが入力をクリックするとキーボードが開きますが、スクロールせずにコンテンツが非表示になります。
これを回避する方法はありますか？

これは私のコードです：

<form #f="ngForm" (ngSubmit)="sendMail()">
   <ion-item>
     <ion-label position="floating">name
     </ion-label>
     <ion-input [(ngModel)]="senderName">
     </ion-input>
   </ion-item>

   <ion-item>
      <ion-label position="floating">mail
      </ion-label>
      <ion-input [(ngModel)]="senderMail">
      </ion-input>
    </ion-item>

    <ion-item class="borderedTextArea">
      <ion-textarea [(ngModel)]="mailText" style="height:150px;"></ion-textarea>
    </ion-item>

    <ion-button type="submit" style="float:left">send</ion-button>

</form>
cordovaionic-frameworkionic4
6
amitairos

キーボードプラグインをダウングレードして解決します

ionic cordova plugin remove cordova-plugin-ionic-keyboard

ionic cordova plugin add [email protected]

Androidプラットフォームを削除して、もう一度追加します

0
poimsm2

私はこれをIonicバグを暫定的に解決しました：

...
<ion-texarea (ionFocus)="fixTextareaBug()">
...

そしてあなたの.ts

@ViewChild(IonTextarea)
public ionTextArea: IonTextarea;
private focusFix = false;

...
...

public fixTextareaBug() {
  setTimeout(() => {
    if (this.focusFix) {
      this.focusFix = false;
      return;
    }
    (this.ionTextArea as any).el.lastElementChild.blur();
    this.focusFix = true;
    (this.ionTextArea as any).el.lastElementChild.focus();
  }, TEXTAREA_TIMEOUT);
}

それがあなたの問題を解決したことを願っています

0
lokoxumusu

私もその問題を抱えていましたが、Androidでのみ、フォーカスされた要素とキーボードの高さを取得するスクリプトを作成し、jQueryを使用してmarginTopを追加して、キーボードが表示されたときに本体をキーボードの上に移動しました。これは私のコードです：

constructor(
    private platform: Platform,
    private keyboard: Keyboard
  ) {
    if(this.platform.is('Android')){
      this.keyboard.onKeyboardShow().subscribe((e) => {
        const offset = $(document.activeElement).offset().top;
        let height = (offset - e.keyboardHeight)*-1;
        height = height > 0 ? 0 : height;      
        $('body').animate({ 'marginTop': height + 'px' }, 100);
      });
      this.keyboard.onKeyboardHide().subscribe(e => {
        $('body').animate({ 'marginTop': 0 + 'px' }, 100);
      });
    }
}

必要なライブラリ：

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

輸入

    import { Platform } from '@ionic/angular';
    import * as $ from "jquery";
    import { Keyboard } from '@ionic-native/keyboard/ngx';

エレガントなソリューションではありませんが、機能します

このコードを少し変更するだけで、エクスペリエンスが向上します

this.keyboard.onKeyboardShow().subscribe((e) => {
    const safeArea = 40 ;
    const offset1 = $(document.activeElement).offset().top;
    const offset2 = window.innerHeight - e.keyboardHeight - $(document.activeElement).height() - safeArea ;
    const diff = offset1 - offset2;
    if(offset1 > window.innerHeight -  e.keyboardHeight - safeArea)
        $('body').animate({ 'marginTop': -1 * diff + 'px' }, 100);
});

ここに画像の説明を入力

0
angelvals