ionic在ios下键盘挡住输入框的解决方法

解决方案,给input输入框添加一个指令,这个指令用来监听input的onFocus事件,只要触发这个事件,就计算input的top和当前页面滚动的top,从而计算出实际的top,然后控制页面滚动。

.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)

})

}

}

}

}])

参考链接:

http://blog.csdn.net/github_37533433/article/details/66471962

http://www.jb51.net/article/92052.htm

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,981评论 0 1
  • 1.之前做微信公众号时发现每次调用键盘输入的时候输入框就被盖着,让人有点烦,于是研究了一番,有了点下面的收获,解决...
    倘浩洋阅读 9,875评论 0 3
  • 一个真正的强者、不需要用国家与民族的名义来抬高自己、只有弱者才会靠着群体的名誉狂妄嚣张。一个强者、在他心里:他自己...
    牧佟阅读 640评论 0 0
  • 断断续续地学完四节课,慢慢地有一点进步。不奢望能练到可以登台,不过,一定可以学有所获,哪怕只是让自己沉醉。 #20...
    山水白雲间阅读 193评论 0 0

友情链接更多精彩内容