Android 离子安卓键盘问题_Android_Angularjs_Ionic Framework_Android Softkeyboard

Android 离子安卓键盘问题

android angularjs ionic-framework

Android 离子安卓键盘问题,android,angularjs,ionic-framework,android-softkeyboard,Android,Angularjs,Ionic Framework,Android Softkeyboard,我是爱奥尼亚的新手。我开始设计和开发我的应用程序，但很快就遇到了问题。我真的不知道iPhone是如何工作的，因为我只是在我的android设备上测试在我的应用程序中，我使用的是starter tabs模板，顶部是标题，底部是选项卡。在我的一个导航视图中，我有一个固定的控制区域、一个可滚动区域和一个固定的窄输入区域。以下是我的应用程序布局的简单说明：我在这里面临的问题是，当我点击输入区域进行输入时，android键盘弹出，向上推我的滚动区域、输入区域和选项卡，使我的屏幕看起来如下所示：这

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

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

我在这里面临的问题是，当我点击输入区域进行输入时，android键盘弹出，向上推我的滚动区域、输入区域和选项卡，使我的屏幕看起来如下所示：

这基本上“阻塞”了我的应用程序外观。所以我开始思考其他人是如何处理的。通过谷歌搜索，我发现当键盘处于活动状态时，我可以通过给我的

div

s设置“hide on keyboard open”类来隐藏东西，但这只会

显示：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

class添加到我的body元素并删除我的选项卡（尽管我认为我应该监视选项卡的类更改，以便

remove（）

操作正常工作，但我只找到了jQuery方法，我相信这违反了angularJS的规则），但它没有工作

那么，处理这个问题的常见方法是什么？我一直在想，我相信仅仅是删除和恢复某些元素，或者，不管可能与否，让键盘位于主体元素之上（就像z索引差异一样），都不会是一个很好的体验

提前感谢您的帮助。

我按照yurinondual在中的建议通过“删除”和“恢复”我的内容解决了这个问题

该建议是通过css操纵：

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

嗯，发布答案永远不会太迟。基于这些答案，我设法解决了这个问题

我的解决方案：

Index.html 添加了一个侦听showTabs属性的ng类

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

app.js 在app.js的app.run方法中，我将window.eventListener添加到native.keyboardshow和hide中，以便在键盘触发或隐藏时实时锁定目标

请注意，我使用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@.选项卡 -仅通过css定位.tabs -位置：固定+底部：0@tabs -在离子论坛和堆栈溢出上有很多答案

这是我找到的最好的解决办法

附言：这一次我投了更高的票，因为我得到了一些白发试图正确地解决它

如果你还没有找到什么东西，那么试试这个@Atula Thx作为你的建议，但是你的建议是使用侧菜单而不是标签，对吗？但我真的不认为它回答了我的问题，因为当键盘打开时，这仍然会导致我的滚动和输入区域出现问题。有没有关于如何避免这种情况的建议？（请看上面我的应用程序布局的草图。）这不是侧菜单或选项卡。这就是如何修理键盘。但也许它对你不起作用。@Atula好吧，我又看了一遍代码，但没有键盘动作的迹象？

   $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;
      }
   }