在使用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) }) } } } }])