ionic開發中,鍵盤彈出遮擋div內元素的解決方案
阿新 • • 發佈:2019-02-17
採用ionic 開發中,遇到鍵盤彈出遮擋元素的問題。
以登陸頁面為例,輸入使用者名稱和密碼時,鍵盤遮擋了登陸按鈕。
最終採用自定義指令解決了問題:
.directive('popupKeyBoardShow', [function ($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) { return { link: function (scope, element, attributes) { window.addEventListener('native.keyboardshow'在包含使用者名稱,密碼和登陸按鈕的div 或者 form 元素中直接使用, function (e) { angular.element(element).parent().parent().css({ 'margin-top': '-' + 80 + 'px' //這裡80可以根據頁面設計,自行修改 }) }) window.addEventListener('native.keyboardhide', function (e) { angular.element(element).parent().parent().css({ 'margin-top': 0 }) }) } } }]);
popup-key-board-show
指令,就能使鍵盤彈出式,div 自動上移,把loginButton 顯示出來