首页 文章

离子3离子输入捕获Android中整行的焦点

提问于
浏览 次
1

这个离子页面只是一个带有一些元素的形式 . 在“电话”字段中，我创建了一个在您单击图像时打开的模式：

<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>

它在离子实验室的iOS和Windows上完美运行 . 但在Android中，行为是不同的：当我点击图像时，手机离子输入获得焦点，整个表格向上移动，为键盘腾出空间并将字段隐藏在 Headers 下 .

我想：

1）能够使图像可点击 .

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

有任何想法吗？谢谢！

UPDATE:

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

但我还有一个问题，当键盘打开时，整个页面向上移动，顶部元素隐藏在 Headers 下方（你不能向下滚动它们） .

ionic2 ionic3

1 回答

  • 1

    1）你需要将 ion-item 分开 ion-item . 如果 ion-item 中有一个 ion-input ，那么你放在一起的所有东西都是 input .

    2）在不操纵ts的情况下执行此操作的最简单方法是使用常规输入，而不是 ion-input 或在 div 内使用 ion-input 而不是 ion-item . 第二个我只是猜测，因为如果你在 ion-item 内有一个 ion-input ，显示键盘的滚动行为就会发生 .

    希望这可以帮助 ：）

    回复于

相关问题