ionic開發中點擊input時鍵盤自動彈出

2019-11-19 18:17:58

字體：大中小

來源：轉載

供稿：網友

ionic開發移動端界面時，在輸入用戶名和密碼的時候，我希望輸入法不要擋住我的輸入框，并且輸入框往上滾動的時候，頂部標題不要上移，只是input內容部分往上移動，點擊密碼輸入框時我還想看見按鈕，這樣不用關閉輸入法，也可以直接點擊登錄按鈕，關閉輸入法自動恢復成默認的界面，用戶體驗不錯哦~；找了很多代碼，以下代碼是我想要的效果：

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

效果圖：

點擊輸入框前的界面：