凤凰山下论坛,题西林壁 古诗,world of whorecraft
采用ionic 开发中,遇到键盘弹出遮挡元素的问题。
以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。
最终采用自定义指令解决了问题:
1 .directive('popupkeyboardshow', [function ($rootscope, $ionicplatform, $timeout, $ionichistory, $cordovakeyboard) { 2 return { 3 link: function (scope, element, attributes) { 4 window.addeventlistener('native.keyboardshow', function (e) { 5 angular.element(element).parent().parent().css({ 6 'margin-top': '-' + 80 + 'px' //这里80可以根据页面设计,自行修改 7 }) 8 }) 9 10 window.addeventlistener('native.keyboardhide', function (e) { 11 angular.element(element).parent().parent().css({ 12 'margin-top': 0 13 }) 14 }) 15 } 16 } 17 }]);
引用:将命名好的指令名 :popupkeyboardshow,按驼峰拆开用“-”连接成小写,如:popup-key-board-show。
<popup-key-board-show>这里放div内容</popup-key-board-show>。如:
<form action=""> <popup-key-board-show> <div> <input type="text" ng-model="user.name" placeholder="用户名"> </div> <div style="margin: 24px 0;"> <input type="password" ng-model="user.pwd" placeholder="密码"> </div> <div class="login">登录</div> </popup-key-board-show> </form>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论