Ionic 3 离子输入在 Android 中捕获整行的焦点答案

【问题标题】：Ionic 3 ion-input captures focus of the whole row in AndroidIonic 3 离子输入在 Android 中捕获整行的焦点
【发布时间】：2017-05-29 03:54:53
【问题描述】：

这个离子页面只是一个包含一些元素的表单。在电话字段中，我创建了一个模式，当您单击图像时会打开：

<ion-grid>
  <ion-row>
   <ion-col>
    <form #registerForm="ngForm" novalidate [formGroup]="form">    

      [...]

      <ion-item>
        <img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
        <p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
        <ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
        </ion-icon>

        <ion-input
          placeholder="Phone"
          type="text"
          [(ngModel)]="account.phone" 
          name="phone"
          required
          pattern=".{8,}"
          #phone="ngModel"
          ></ion-input>
        </ion-item>

它在 ionic-lab 的 iOS 和 Windows 上完美运行。但在 Android 中，行为有所不同：当我单击图像时，Phone 离子输入获得焦点，整个表单向上移动，为键盘腾出空间并将字段隐藏在标题下。

我想：

1) 能够使图片可点击。

2) 当离子输入聚焦时禁用自动滚动。我试过keyboard.disableScroll(true) 没有成功。

有什么想法吗？谢谢！

更新：

正如here 所解释的，将.input-cover { position: static; } 添加到scss 文件可以稳定表单并使图像点击事件响应！这样就解决了第一个问题。

但我仍然有一个问题，当键盘打开时，整个页面向上移动，顶部元素隐藏在标题下方（并且您无法向下滚动它们）。

【问题讨论】：

对于 1) 您可以尝试通过创建具有两个单独列的行来尝试，一个用于标志，另一个用于输入。 2）请看this answer。
我已经更新了我的答案，看起来像是第一个问题的有效解决方案！ Sebaferreras，我已经尝试了在那篇文章中解释的内容，但是当我在 true 和 false 之间更改 keyboard.disableScroll 时，我没有注意到任何变化。

标签： ionic2 ionic3

【解决方案1】：

1) 您需要将ion-item 与img 分开。如果您在ion-item 中有一个ion-input，那么您放在一起的所有内容都将成为该input 的“一部分”。

2) 不通过 ts 进行操作的最简单方法是使用常规输入，而不是 ion-input，或者在 div 中使用 ion-input 而不是 ion-item。第二个我只是猜测，因为如果您在ion-item 内有一个ion-input，则会发生显示键盘的滚动行为。

希望这会有所帮助:)

【讨论】：