采用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 显示出来