您的位置:首页 > 移动开发 > 微信开发

ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

2016-09-06 00:00 1031 查看
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了。

  可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案。

  我就不仔细讲代码了,直接上图  

angular.module('MyApp')
.directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPosition', function ($ionicScrollDelegate, $window, $timeout, $ionicPosition) {
return {
restrict: 'A',
scope: false,
link: function ($scope, iElm, iAttrs, controller) {
if (ionic.Platform.isIOS()) {
iElm.on('focus', function () {
var top = $ionicScrollDelegate.getScrollPosition().top;
var eleTop = ($ionicPosition.offset(iElm).top) / 2
var realTop = eleTop + top;
$timeout(function () {
if (!$scope.$last) {
$ionicScrollDelegate.scrollTo(0,realTop);
} else {
try {
var aim = angular.element(document).find('.scroll')
aim.css('transform', 'translate3d(0px,' + '-' + realTop + 'px, 0px) scale(1)');
$timeout(function () {
iElm[0].focus();
console.log(2);
}, 100)
} catch (e) {
}
}
}, 500)
})
}
}
}
}])


您可能感兴趣的文章:

iOS应用中使用AsyncSocket库处理Socket通信的用法讲解
浅析iOS应用开发中线程间的通信与线程安全问题
php、java、android、ios通用的3des方法(推荐)
iOS动画教你编写Slack的Loading动画进阶篇
Android开发实现带有反弹效果仿IOS反弹scrollview教程详解
iOS实现动态的开屏广告示例代码
IOS轻松几步实现自定义转场动画
IOS绘制虚线的方法总结
IOS设置按钮为圆角的示例代码
iOS App之间的通信 -local socket示例
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ionic 键盘 输入框