離子Android鍵盤問題

Question

我是離子的新手。 我開始設計和開發我的應用程序但很快就遇到了問題。 我真的不知道iPhone是如何工作的，因為我只是在我的Android設備上測試它。

在我的應用程序中，我使用的是入門標簽模板，頂部是標題，底部是標簽。 在我的一個導航視圖中，我有一個固定的控制區域，一個可滾動的區域和一個固定的窄輸入區域。 以下是我的應用布局的簡單描述：

我在這里遇到的問題是，當我點擊輸入區域進行輸入時，Android鍵盤彈出，向上推動我的滾動區域，輸入區域和標簽，以便我的屏幕看起來如下所示：

這基本上“堵塞”我的應用程序外觀。 所以我開始思考其他人是如何處理它的。 通過谷歌搜索，我發現當鍵盤處於活動狀態時，我可以通過向我的div提供“hide-on-keyboard-open”類來隱藏它，但這只會display: none仍然保持其寬度，高度和位置。

我的問題是，有什么方法可以在鍵盤打開時逐字“刪除”我的元素，並在鍵盤關閉時“恢復”它們？ 我試過了

window.addEventListener('native.keyboardshow', function(){
  document.body.classList.add('keyboard-open');
});

if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) {
  angular.element(document.querySelector("div.tab-nav.tabs").remove());
}

將keyboard-open類添加到我的body元素並刪除我的標簽（盡管我認為我應該監視標簽的類更改為remove()操作使它工作，但我只找到jQuery方法來做它我相信這是違反angularJS的規則嗎？）但它沒有用。

那么，解決這個問題的常用方法是什么？ 正如我一直在思考它，我相信只是移除和恢復某些元素，或者，無論是否可能，將鍵盤放在body元素之上（就像z-index差異一樣）並不是真正的體驗。

在此先感謝您的幫助。

Answer 1

那么發布答案永遠不會太遲。 我設法根據這些答案解決了這個問題。

我的解決方案

Index.html添加了一個監聽showTabs屬性的ng-class。

<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">

style.css添加了以下代碼段，以便在鍵盤打開時隱藏選項卡

.is-keyboard-open .tabs{
  display:none;
}
.is-keyboard-open .has-tabs{
 bottom:0;
 }

app.js在app.js上，在app.run方法中，我將window.eventListener添加到native.keyboardshow並隱藏，以便在鍵盤觸發或隱藏時實時定位。

請注意，我使用的是isAndroid（）因為我在android中只有這個問題。

   $rootScope.showTabs = true;
   if(ionic.Platform.isAndroid()){
      window.addEventListener('native.keyboardshow', keyboardShowHandler);
      window.addEventListener('native.keyboardhide', keyboardHideHandler);

      function keyboardShowHandler(e){
         $rootScope.showTabs = true;
      }

      function keyboardHideHandler(e){
          $rootScope.showTabs = false;
      }
   }

現在一切正常。

注意：我之前嘗試過： - 添加更多z-index @ .tabs - 僅通過css定位.tabs - position：fixed + bottom：0 @ tabs - 離子論壇和堆棧溢出的很多答案

這是我找到的最佳解決方案。

PS：贊成這一個因為我獲得了一些試圖正確解決它的白發。

Answer 2

我通過“刪除”和“恢復”我的內容來解決這個問題，因為yurinondual在離線論壇的鏈接中建議。

建議是通過css操作：

.keyboard-open .tabs{
  display:none;
}
.keyboard-open .has-tabs{
  bottom:0;
}
body.keyboard-open .has-footer{ 
  bottom: 0;
}

離子Android鍵盤問題

問題描述

2 個解決方案

解決方案1
2 2016-12-21 16:36:31

解決方案2
0 2016-05-27 06:46:25

離子Android鍵盤問題

問題描述

2 個解決方案

解決方案1 2 2016-12-21 16:36:31

解決方案2 0 2016-05-27 06:46:25

解決方案1
2 2016-12-21 16:36:31

解決方案2
0 2016-05-27 06:46:25