1. 程式人生 > >ionic開發中,鍵盤彈出遮擋div內元素的解決方案

ionic開發中,鍵盤彈出遮擋div內元素的解決方案

採用ionic 開發中,遇到鍵盤彈出遮擋元素的問題。

以登陸頁面為例,輸入使用者名稱和密碼時,鍵盤遮擋了登陸按鈕。

最終採用自定義指令解決了問題:

.directive('popupKeyBoardShow', [function ($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) {
  return {
    link: function (scope, element, attributes) {
      window.addEventListener('native.keyboardshow'
, 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 }) }) } } }]);
在包含使用者名稱,密碼和登陸按鈕的div 或者 form 元素中直接使用 
popup-key-board-show
指令,就能使鍵盤彈出式,div 自動上移,把loginButton 顯示出來