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

Question

几个月来我一直遇到同样的问题，但我仍然找不到解决方案。我有一个应用程序，其中有多种形式，当专注于输入字段时，键盘会覆盖该输入字段，用户看不到任何内容。这只发生在 iOS 上，在 android 上一切正常。
在这个应用程序中，我使用 ionic 5 和电容器。
这就是我希望我的应用程序工作的方式:EXAMPLE 1
它目前的工作方式如下:EXAMPLE 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

我也有这个问题，这对我的项目来说非常有问题。所以我有三个解决方案
解决方案一:
在您的 app.component.ts 中，尝试强制将焦点放在单击的元素上:

      window.addEventListener('keyboardDidShow', (e) => {
        const elementFocused: any = document.querySelector(':focus');
        if (elementFocused) {
          elementFocused.blur();
          elementFocused.focus();
        }
      });

在 platform.ready 中添加这些行方法在某些情况下解决了我的问题。
解决方案2: @Eliseo
就像他说的那样，添加margin-bottom来模拟键盘的空间也是一种解决方案，但是如果你想在任何输入中应用它，在 app.component.ts中添加它使用 window.addEventListener('keyboardDidShow', (e) => {}); ，您可以在 keyboardDidShow 上进行测试还有 focus事件或 blur 解决方案3:单击时以编程方式滚动。
我在 .ts 上定义了这样的变量:

@ViewChild('scrollableContent', { static: false }) scrollableContent: ElementRef;
  private scrollContainer: any;

  ngAfterViewInit() {
    this.scrollContainer = this.scrollableContent.nativeElement;
  }
  private scrollToBottom(): void {
    this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight;
  }

然后在我的html中，我正在做

<div class="my-scrollable-content" #scrollableContent>
 <input (click)="scrollToBottom()">....</input>  // click event or focus
</div>

或者你可以像这样在你的 ts 上添加监听器:

 window.addEventListener('keyboardDidShow', (e) => {
        const elementFocused: any = document.querySelector(':focus');
        if (elementFocused) {
          this.scrollToBottom();
        }
      });

这听起来有点神奇，但这是唯一适用于我的案例的解决方案。滚动方法是最适合我的方法。