离子Android键盘问题

Question

I'm new to ionic. 我是离子的新手。 I began designing and developing my app but I got to a problem very soon. 我开始设计和开发我的应用程序但很快就遇到了问题。 I don't really know how iPhone works because I am only testing this on my android device. 我真的不知道iPhone是如何工作的，因为我只是在我的Android设备上测试它。

In my app, I am using the starter tabs template with a header at top, tabs at bottom. 在我的应用程序中，我使用的是入门标签模板，顶部是标题，底部是标签。 In one of my nav-views, I have a fixed control area, a scrollable area, and a fixed narrow input area. 在我的一个导航视图中，我有一个固定的控制区域，一个可滚动的区域和一个固定的窄输入区域。 Below is a simple description of my app layout: 以下是我的应用布局的简单描述：

The problem that I'm facing here is when I click on the input area for input, the android keyboard pops up, pushing my scroll area, input area, and tabs upwards so that my screen would look like the following: 我在这里遇到的问题是，当我点击输入区域进行输入时，Android键盘弹出，向上推动我的滚动区域，输入区域和标签，以便我的屏幕看起来如下所示：

This basically "jams" my app appearance. 这基本上“堵塞”我的应用程序外观。 So I came to thinking how others have dealt with it. 所以我开始思考其他人是如何处理它的。 From googling I found that I could hide things when keyboard is active by giving "hide-on-keyboard-open" class to my div s but this would just display: none while still holding its width, height, and place. 通过谷歌搜索，我发现当键盘处于活动状态时，我可以通过向我的div提供“hide-on-keyboard-open”类来隐藏它，但这只会display: none仍然保持其宽度，高度和位置。

My question is are there any ways to literally "remove" my elements when my keyboard is open and "restore" them when my keyboard is closed? 我的问题是，有什么方法可以在键盘打开时逐字“删除”我的元素，并在键盘关闭时“恢复”它们？ I tried 我试过了

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());
}

to add keyboard-open class to my body element and delete my tabs (even though I think I should monitor the tabs' class changes for the remove() action for it to work, but I only found jQuery ways to do it and I believe that's against the rules of angularJS?) but it didn't work. 将keyboard-open类添加到我的body元素并删除我的标签（尽管我认为我应该监视标签的类更改为remove()操作使它工作，但我只找到jQuery方法来做它我相信这是违反angularJS的规则吗？）但它没有用。

So, what are the common ways to deal with this? 那么，解决这个问题的常用方法是什么？ As I kept thinking about it, I believe just removing and restoring certain elements or, whether it's possible or not, having keyboard come on top of the body element (just like z-index differences) wouldn't really be a pretty experience. 正如我一直在思考它，我相信只是移除和恢复某些元素，或者，无论是否可能，将键盘放在body元素之上（就像z-index差异一样）并不是真正的体验。

Thanks in advance for help. 在此先感谢您的帮助。

Answer 1

Well it's never too late to post an answer. 那么发布答案永远不会太迟。 I managed to solve this problem based on some of this answers. 我设法根据这些答案解决了这个问题。

My solution: 我的解决方案

Index.html Added a ng-class listening to the showTabs attribute. Index.html添加了一个监听showTabs属性的ng-class。

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

style.css Added the following snippet so the tabs are hidden in case of keyboard open style.css添加了以下代码段，以便在键盘打开时隐藏选项卡

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

app.js On app.js, in the app.run method, I added the window.eventListener to the native.keyboardshow and hide in order to target in real time whenever the keyboard fires or hides. app.js在app.js上，在app.run方法中，我将window.eventListener添加到native.keyboardshow并隐藏，以便在键盘触发或隐藏时实时定位。

Note that I used isAndroid() because I only had this problem in android. 请注意，我使用的是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;
      }
   }

Now everything is working as it should. 现在一切正常。

Notes: I tried previously: - add more z-index @ .tabs - target the .tabs via css only - position: fixed + bottom:0 @ tabs - a lot of answers on ionic forums and stack overflow 注意：我之前尝试过： - 添加更多z-index @ .tabs - 仅通过css定位.tabs - position：fixed + bottom：0 @ tabs - 离子论坛和堆栈溢出的很多答案

This was the best solution I found. 这是我找到的最佳解决方案。

PS: Upvoted this one because I gained some white hairs trying to solve it properly. PS：赞成这一个因为我获得了一些试图正确解决它的白发。

Answer 2

I resolved this by "removing" and "restoring" my contents as yurinondual suggests in this link from ionic forum . 我通过“删除”和“恢复”我的内容来解决这个问题，因为yurinondual在离线论坛的链接中建议。

The suggestion was via css manipulation: 建议是通过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