Angular + 电容器：输入未与键盘对齐

Question

我正在 angular 环境中开发应用程序。我主要通过浏览器测试和开发应用程序，然后通过电容器将其构建为运行作为 iOS 和 Android.

上的本机应用程序

我现在面临一个严重影响整体用户体验的错误，每当用户按下输入字段（在最终 iOS 构建中）时，iOS（电容器）键盘根据需要打开，同时也将输入字段从用户焦点移开。有时它甚至被其他 UI 元素完全隐藏。

有没有办法以编程方式移动焦点输入字段，使其始终准确显示在键盘上方？

我还尝试更改电容键盘“调整大小”设置（原生、主体、离子、none），但没有任何改进。

我在下面附上了示例和 html 用于我的输入表单。谢谢！

HTML FORM

示例视频：https://i.imgur.com/5NRsaX0.mp4

Answer 1

我不确定它是否适合你，但请尝试

如果没有将这部分移到 ion-header 中。
使用ion-content代替<div class="content">
如果您希望目标输入直接位于 header 下，那么您可以尝试使用 ion--content 中的 scrollToPoint 方法，如下所示

<input (focus)="inputTrigger($event)">

export class YourPage {
    @ViewChild(IonContent) theContent: IonContent;

   // 
    inputTrigger(event) {
      const position = event.target.getBoundingClientRet()
      this.theContent.scrollToPoint(0,position.top).then(()=>{})
    }
}

它不会开箱即用，因为我不完全了解您的代码，但它可能会引导您找到答案；）

Angular + 电容器：输入未与键盘对齐

Angular + Capacitor: Input not aligned with Keyboard

forms

keyboard

input

angular

capacitor