离子输入隐藏在键盘下方 - ionic 2

Posted 2023-02-22

【中文标题】离子输入隐藏在键盘下方 - ionic 2

【英文标题】：Ion input hides below keyboard - ionic 2

【发布时间】：2017-11-07 10:23:56

【问题描述】：

先看代码：

<ion-row>
    <ion-col col-6>
      <ion-input placeholder="First Name" [value]="fName" [(ngModel)]="fName"></ion-input>
    </ion-col>
    <ion-col col-6>
      <ion-input placeholder="Last Name" [value]="lName" [(ngModel)]="lName"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-12>
      <ion-input type="email" [disabled]="emailDisabled" placeholder="Email" [value]="email" [(ngModel)]="email"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-12>
      <ion-input type="tel" maxlength="10" placeholder="Mobile Number" [value]="mobile" [(ngModel)]="mobile"></ion-input>
    </ion-col>
  </ion-row>

问题是：当任何离子输入聚焦并出现键盘时，它会隐藏在键盘下方。我希望它在键盘上方滚动，以便它保持可见。我怎样才能做到这一点？

编辑1： 当我开始在输入字段中输入时，它会向上滚动并可见。

谢谢

【问题讨论】：

这是在页脚吗？

没有。全部在离子含量中。

不确定它是否有帮助.. 在 ios 的页脚中与 ion-textarea 有类似的问题.. 我切换到 html 元素 textarea 并且它有效.. 尝试使用 input.. 你不过，必须使用 css 完全自定义

纯 html 不会有 ngModel 或值。我错了吗？

angular 会解决这个问题.. ngModel 仍然可以工作..

【参考方案1】：

我在 android 上遇到了同样的问题并从以下关于 git 的帖子中解决了这个错误

Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component

我解决了添加 style position: initial to ion-col 元素的问题。