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

Question

我正在 Angular 环境中开发一个应用程序。我主要通过浏览器测试和开发应用程序，然后通过电容器构建它以作为 iOS 和 Android 上的本机应用程序运行。

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

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

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

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

HTML 表格

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

Answer 1

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

1. 将此部分移至 ion-header （如果未这样做）。
2. 使用 ion-content 而不是

   <div class="content">

3. 如果您希望目标输入直接位于标题下方，那么您可以尝试使用

   scrollToPoint

   中的

   ion--content

   方法，如下所示

<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(()=>{})
    }
}

它不会开箱即用，因为我不太清楚你的代码，但它可能会引导你找到答案；）

Answer 2

尝试添加以下 css 样式。它对我有用：

input, input:before, input:after {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}