zoukankan      html  css  js  c++  java
  • ionic开发中,输入法键盘弹出遮挡住div元素

    采用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>

      

  • 相关阅读:
    我的省选 Day -9
    我的省选 Day -10
    我的省选 Day -11
    我的省选 Day -12
    我的省选 Day -13
    [NOI2013]快餐店
    我的省选 Day -14
    杭电多校2020第7场-E Expectation
    「联合省选2020」组合数问题
    UR#19 通用评测号
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/10374947.html
Copyright © 2011-2022 走看看