Ionic 3離子輸入捕獲Android中整行的焦點

這個離子頁面只是一些帶有一些元素的表單。在手機領域，我已經創建，打開，當你點擊圖片一個模式：Ionic 3離子輸入捕獲Android中整行的焦點

<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中，行爲是不同的：當我點擊圖像時，電話離子輸入獲得焦點，整個表單向上移動，爲鍵盤留出空間並隱藏標題下的字段。

我想：

1）能夠使圖像可點擊。

2）禁用離子輸入聚焦時的自動滾動。我試過keyboard.disableScroll(true)沒有成功。

任何想法？謝謝！

UPDATE：

正如所解釋的here，增加.input-cover { position: static; }到SCSS文件穩定形式，使圖像click事件響應！這就解決了第一個問題。

但我仍然有問題，當鍵盤打開時，整個頁面向上移動，頂部元素隱藏在標題下方（並且不能向下滾動）。

來源

2017-05-29 emiliosg

爲1），你可以通過創建兩個單獨的欄目，一個是國旗，另一個用於輸入一行試試。對於2），請看看[這個答案]（https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows/41163695#41163695）。 – sebaferreras

我已經更新了我的答案，它看起來像是第一個問題的工作解決方案！ Sebaferreras，我試過在那篇文章中解釋的內容，但是當我在true和false之間更改keyboard.disableScroll時，我沒有注意到任何更改。 – emiliosg

1）您需要從img中分離出ion-item。如果您在ion-item中有ion-input，則放在一起的所有內容都將是該input的「部分」。

2）爲此而不經由TS操縱的最簡單的方法是使用常規的輸入，而不是ion-input或使用div代替ion-item內的ion-input。第二個我只是猜測，因爲顯示鍵盤的滾動行爲發生在ion-item內部的ion-input。

希望這有助於:)

來源

2017-05-29 12:06:17

Ionic 3離子輸入捕獲Android中整行的焦點

回答

相關問題