Question

我是离子的新手。我开始设计和开发我的应用程序但很快就遇到了问题。我真的不知道iPhone是如何工作的，因为我只在我的Android设备上测试它。

在我的应用中，我使用的是入门标签模板，顶部是标题，底部是标签。在我的一个导航视图中，我有一个固定的控制区域，一个可滚动的区域和一个固定的窄输入区域。以下是我的应用布局的简单说明：

我在这里面临的问题是，当我点击输入区域进行输入时，Android键盘会弹出，向上推动我的滚动区域，输入区域和标签，以便我的屏幕看起来如下所示： / p>

这基本上“堵塞”我的应用程序外观。所以我开始思考其他人是如何处理它的。通过谷歌搜索，我发现当键盘处于活动状态时，我可以通过向我的div提供“隐藏键盘打开”类来隐藏内容，但这只会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差异一样）并不是真正的体验。 / p>

提前感谢您的帮助。

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 - 位置：固定+底部：0 @标签 - 关于离子论坛和堆栈溢出的很多答案

这是我找到的最佳解决方案。

PS：赞成这个，因为我获得了一些白发，试图正确解决它。

Answer 2

我通过“删除”和“恢复”我的内容解决了这个问题，因为 yurinondual 在this link from ionic forum中建议。

建议是通过css操作：

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

离子Android键盘问题

2 个答案: