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

【问题标题】：The keyboard covers the input field in ios - Ionic 5键盘覆盖了 ios - Ionic 5 中的输入字段
【发布时间】：2021-04-02 20:39:54
【问题描述】：

几个月来我一直遇到同样的问题，但我仍然找不到解决方案。我有一个应用程序，其中有多种形式，当专注于输入字段时，键盘会覆盖该输入字段，用户看不到任何内容。这只发生在 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});
    });
  }

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

【问题讨论】：

也许这个topic可以帮助你
我会尽力按照您的建议去做。但它似乎有很多代码，我的应用程序中有 10 多个表单，而且所有表单都发生了同样的事情。我认为应该有更好的选择......
这部分看起来不是很长helper 但是还可以。

标签： angular ionic-framework ionic4 ionic-native

【解决方案1】：

我也遇到了这个问题，这对我的项目来说非常有问题。所以我有三个解决方案

解决方案 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();
        }
      });

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

【讨论】：

我喜欢你的第二个解决方案 :)

【解决方案2】：

为什么不将您的应用包含在一个 div 中，例如边距底部：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 中将服务作为公共注入

   constructor(public auxService:AuxService){}

和

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

this stackblitz 中的所有这些都是傻瓜

【讨论】：