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

Question

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

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

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

目前的工作方式如下：

.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

我也遇到了这个问题，这对我的项目来说是一个很大的问题。所以我对此有三个解决方案

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

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

Answer 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 中将 servcie 作为 public 注入

   constructor(public auxService:AuxService){}

还有

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

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

Answer 3

虽然这个问题已经有两年了，但在使用 @capacitor/keyboard 和 ionic 时，有一个新的、简单的解决方案：方法

scrollIntoView() 可以轻松地将当前元素移动到视图中。一旦键盘显示出来，您就可以简单地运行此方法。 我是这样实现的：

Keyboard.addListener("keyboardDidShow", () => {
  if (document.activeElement) {
     document.activeElement.scrollIntoView({behavior: "smooth", block: "center"});
  }
});

一旦显示键盘，输入元素就会自动滚动到视图中。

请注意，这仅适用于将

resize

 设置为 

KeyboardResize.BODY

 或 

KeyboardResize.IONIC

。

希望对某人有帮助。

Answer 4

这在 2023 年有效！我为这事哭了。感谢您发布此内容。单独安装插件对我来说不起作用。我有一个科尔多瓦应用程序已转换为电容器。什么都不起作用。键盘覆盖了文本输入，仅适用于 ios，不适用于 Android。