Ionic Android 键盘问题答案

【问题标题】：Ionic Android Keyboard IssuesIonic Android 键盘问题
【发布时间】：2017-09-30 02:31:08
【问题描述】：

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

在我的应用程序中，我使用的是起始标签模板，顶部有标题，底部有标签。在我的一个导航视图中，我有一个固定的控制区域、一个可滚动的区域和一个固定的窄输入区域。下面是我的应用布局的简单描述：

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

这基本上“堵塞”了我的应用程序外观。所以我开始思考其他人是如何处理它的。通过谷歌搜索，我发现当键盘处于活动状态时，我可以通过向我的divs 提供“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 差异一样）并不是一个很好的体验。

提前感谢您的帮助。

【问题讨论】：

如果你还没有找到什么，那么试试这个codepen.io/anon/pen/JXwGWJ
@Atula 感谢您的建议，但您的建议是使用侧边菜单而不是标签，对吗？但我真的不认为它回答了我的问题，因为这仍然会导致我的滚动和输入区域在键盘打开时变得狭窄。关于如何避免这种情况的任何建议？（请看上面我的应用布局的粗略草图。）
这不是关于侧边菜单或标签的。这是如何修复键盘。但也许它不适合你。
@Atula 好吧，我再次查看了代码，但没有任何键盘操作的迹象？

标签： android angularjs ionic-framework android-softkeyboard

【解决方案1】：

嗯，发布答案永远不会太晚。我设法根据其中的一些答案解决了这个问题。

我的解决方案：

Index.html 添加了一个监听 showTabs 属性的 ng-class。

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

style.css 添加了以下 sn-p 以便在键盘打开的情况下隐藏选项卡

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

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 @ .tabs - 仅通过 css 定位 .tabs - 位置：固定 + 底部：0 @ 选项卡 - 离子论坛和堆栈溢出的很多答案

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

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

【讨论】：

【解决方案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;
}

【讨论】：