ionic-键盘覆盖输入框和返回键问题解决方案

在开发一款优秀的产品时，用户体验是至关重要的，友好的，符合思维逻辑的交互体验是作为一款产品的首要印象

最近在用ionic开发项目时，就遇到了两个关于键盘的问题
1、在一个页面的底部如果存在一个的元素，比如说是一篇文章的评论，那么我们点击input的时候就会触发弹出一个键盘，最终会把底部的评论框给挡住
2、在弹出键盘的情况下，当我们点击返回键的时候，我们希望是先把键盘隐藏掉，但是在ionic中，它会隐藏键盘，但同时也返回上一页的历史页面

这两个问题是涉及到用户最重要的体验问题，经过了几天的反复研究和查找资料，最后找到了解决的方法

第一个问题：
(1)我们知道ionic的底部的这个标签，是固定在底部的，而且也是脱离文档流的，那么我们可以将我们的评论框定义在这个标签中，那么我们已经省去了很多的工作，因为已经帮我们至少固定在底部了。






发送   


具体的样式：


(2)我们可以在浏览器上通过查询器可以查看到或者它的类这个标签的css样色，其中可以知道它的位置是绝对位置，而且bottom是等于0的，所以如果我们可以在点击input输入时，能够实时获取键盘的高度height的话，那么就可以将的bottom位置设置为键盘高度height,那么将不会再挡住输入框了。所以我们需要添加ionic-plugins-keyboard这个插件，这个插件的github:https://github.com/driftyco/ionic-plugins-keyboard.
这个插件里面我们需要注意三个方法：
(a)、window.addEventListener('native.keyboardshow', keyboardShowHandler);
function keyboardShowHandler(e){
    alert('Keyboard height is: ' + e.keyboardHeight);
}
这个方法是监听键盘弹出，e.keyboardHeight这个就是键盘的高度
(b)、window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardHideHandler(e){
    alert('Goodnight, sweet prince');
}
这个方法是将它键盘的隐藏

(c)、cordova.plugins.Keyboard.close();
这个方法是关闭键盘，相当于销毁整个对象

一个属性：cordova.plugins.Keyboard.isVisible。 boolean值，判断键盘是否是活动弹出来的

我们大致了解这个插件的功能后，接下来自定义一个指令，这里叫keyboardshow
.directive('keyboardshow', function($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            window.addEventListener('native.keyboardshow',function (e){              
                   return ;
            });

            window.addEventListener('native.keyboardhide',function (e){
                angular.element(element).css({
                  'bottom':0
                });
            });
        }
    };
});


那么在，可以看到这个指令，也就是在我们进入阅读这一篇文章的时候，angularjs就会解释这个指令，监听这个键盘是否弹出或者隐藏，一旦我们点击input输入框，那么系统就会调用键盘，这个时候就会监听到native.keyboardshow事件，这个时候执行一个css样色修改：
angular.element(element).css({
    'bottom':e.keyboardHeight + 'px'
});
因为是绝对的位置，所以，评论框就会定位在键盘的上方，不会出现覆盖。

如果我们点击键盘的隐藏键，那么将会将听到native.keyboardhide这个事件，这个时候，我们再把bottom设置为0，也就是回到原来的位置。

至此我们已经解决了键盘挡住的问题了。
截图：


第二个问题：
首先我们需要在run中：
.run(function($ionicPlatform, $ionicHistory, $cordovaKeyboard) {
   e.preventDefault();
  $ionicPlatform.registerBackButtonAction(function (e) {
      if($ionicHistory.backView()) {
          if($cordovaKeyboard.isVisible()) {
            $cordovaKeyboard.close();
          }else {
            $ionicHistory.goBack();
          }
      }
  }, 101);
$ionicPlatform.registerBackButtonAction是注册一个返回按钮的事件处理，优先级为101。
ionic在底层源码中定义了物理返回按键的事件处理优先级的：
var PLATFORM_BACK_BUTTON_PRIORITY_VIEW = 100;  
var PLATFORM_BACK_BUTTON_PRIORITY_SIDE_MENU = 150;  
var PLATFORM_BACK_BUTTON_PRIORITY_MODAL = 200;  
var PLATFORM_BACK_BUTTON_PRIORITY_ACTION_SHEET = 300;  
var PLATFORM_BACK_BUTTON_PRIORITY_POPUP = 400;  
var PLATFORM_BACK_BUTTON_PRIORITY_LOADING = 500; 
数字越大，优先级就越高，越先执行。


100优先级是返回上一页，那么我们定义101就是在键盘弹出的情况下，点击返回键是执行101，将键盘收起来，并不是返回上一页，当再次点击时，再返回上一页。
下面的代码分析一下：
if($ionicHistory.backView()) {
  if($cordovaKeyboard.isVisible()) {
    $cordovaKeyboard.close();
  }else {
    $ionicHistory.goBack();
  }
}

当点击返回键时，首先判断是否有上一页的视图存在，如果有存在，那么在判断当前的键盘是否是弹出活动的，如果是，则将键盘关闭，如果没有键盘弹出，那么就是直接返回上一页。

在这里特别要注意的是，这个插件监听的是android原生的键盘，也就是google输入法，如果使用google输入法的话，这个是正常的了，点击返回键，键盘收起来，也没有返回上一页！
但是一般的第三输入法，比如搜狗输入法，百度输入法，讯飞输入法等，这个$cordovaKeyboard.isVisible()获取的值会是false。也就是说在点击返回键时，键盘收起来，同时页面还是返回上一页了，然而这并不是我们所希望的。

那么有什么办法解决吗，可以让不管是什么输入法都能满足条件呢？
办法当然是有的，我们知道当点击返回键时，键盘关闭，此时执行：
window.addEventListener('native.keyboardhide',function (e){
angular.element(element).css({
 'bottom':0
});
});

那么在这里$cordovaKeyboard.isVisible()获取到的值已经变成了false,也就是说，先执行这段代码，再执行注册的那一段返回按钮的代码，所以想个办法让isVisible延时再赋值：
window.addEventListener('native.keyboardhide',function (e){
    angular.element(element).css({
      'bottom':0
    });

    cordova.plugins.Keyboard.isVisible = true;
    $timeout(function() {
      cordova.plugins.Keyboard.isVisible = false;
    },100);
  
});

上面的代码修改成这样，则可以满足所有的输入法，实现当有一个键盘弹出的情况下，点击返回键，会把键盘收起来，不会返回上一页，当再次点击返回键时，才会返回上一页。

如果手机是在全屏的情况下，也就是手机状态栏隐藏的情况下，定义的指令需要加上红色部分代码

.directive('keyboardshow', function($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            window.addEventListener('native.keyboardshow',function (e){              
                     angular.element(element).css({
                'bottom':e.keyboardHeight + 'px'
              });
            });


            window.addEventListener('native.keyboardhide',function (e){
                cordova.plugins.Keyboard.isVisible = true;
                $timeout(function() {
                  cordova.plugins.Keyboard.isVisible = false;
                }, 100);
              
            });
        }
    };
});

也就是把设置样色的那一段代码去电即可。