ionic-键盘覆盖输入框和返回键问题解决方案
在开发一款优秀的产品时，用户体验是至关重要的，友好的，符合思维逻辑的交互体验是作为一款产品的首要印象
最近在用ionic开发项目时，就遇到了两个关于键盘的问题
1、在一个页面的底部如果存在一个的元素，比如说是一篇文章的评论，那么我们点击input的时候就会触发弹出一个键盘，最终会把底部的评论框给挡住
2、在弹出键盘的情况下，当我们点击返回键的时候，我们希望是先把键盘隐藏掉，但是在ionic中，它会隐藏键盘，但同时也返回上一页的历史页面
这两个问题是涉及到用户最重要的体验问题，经过了几天的反复研究和查找资料，最后找到了解决的方法
(1)我们知道ionic的底部的
具体的样式：
(2)我们可以在浏览器上通过查询器可以查看到
这个插件里面我们需要注意三个方法：
(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
});
});
}
};
});
那么在
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);
});
}
};
});
也就是把设置样色的那一段代码去电即可。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！