键盘覆盖了ios中的输入字段-Ionic 5

Question

我已经遇到同样的问题几个月了，但仍然找不到解决方案。我有一个应用程序，其中有多种表单，当专注于输入字段时，键盘会覆盖该输入字段，并且用户看不到任何内容。这只发生在iOS上，在Android上一切正常。

在此应用中，我使用带有电容器的 ionic 5。

这就是我希望我的应用程序工作的方式：示例 1

目前它的工作原理如下：示例2

.HTML

<form [formGroup]="formSubmit" (ngSubmit)="formSubmit()">      
  <mat-form-field appearance="outline" class="field-style">
    <input matInput maxlength="35" class="input-form" placeholder="Agregar un alias (opcional)" formControlName="alias">
  </mat-form-field>
  <button mode="ios" class="btn-siguiente-enable" expand="block" type="submit" *ngIf="formSubmit.valid">Siguiente</button>    
</form>

.TS

ngOnInit() {
    this.initForms();

    Plugins.Keyboard.setScroll({isDisabled: true});

    Plugins.Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.None});
    });

    Plugins.Keyboard.addListener('keyboardWillHide', () => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.Native});
    });
  }  

知道如何解决这个问题吗？

Answer 1

为什么不将您的应用程序包含在一个 div 中，例如 margin-bottom:300px？这使得键盘有足够的空间。

您还可以创建一个指令，应用于向主题发出值的输入类型文本。如果您的主应用程序监听该值，您就可以获得它

export class MarginDirective {
   @HostListener('focus', ['$event.target'])_(){
         this.auxService.marginSubject.next(true)
   }
   @HostListener('blur', ['$event.target'])__(){
         this.auxService.marginSubject.next(false)
   }
   constructor(private auxService:AuxService){}
}

您的服务

@Injectable({
  providedIn: 'root',
})
export class AuxService {

  marginSubject:Subject<boolean>=new Subject<boolean>()
  constructor() { }

}

在你的 main.ts 中将服务注入为 public

   constructor(public auxService:AuxService){}

和

<router-outlet></router-outlet>
<div *ngIf="auxService.marginSubject|async" style="height:200px">

在这个 stackblitz中，这一切都是傻瓜