jquery - iOs 跳转包含 INPUT 的固定页脚

Question

我有一个 phoneGap-cordova 应用程序。其中我有一个页面有一个固定的输入页脚，但是每当在移动设备中打开一个软键(键盘)时，固定元素就会失去它的位置并向上跳，

我见过很多相同的解决方案，但运气不好。

这是我的页面的CSS:

.main {
  display: table;
  border-spacing:0px;
  margin-top:10px;
  margin-left: 18px;
  margin-right: 10px;
  height: auto;
   }

.imageIcon {
  display: table-cell;
  vertical-align:top;
  cursor: pointer;
}
.contentDiv {
  display: table-cell;
  vertical-align: middle;
  padding-left:12px;
  width:100%;
}
.nameAndId {
  /* background-color: aqua; */
  margin-top:6px;
  font-family: Roboto-medium;
  font-size: 13px;
}
.commentDetails {
    margin-top: 5px;
    font-size: 12px;
    word-break: break-word;
}
.ID
{
    font-size: 12px;
    display:inline;
}
.updateTime {
  float: right;
  margin-top: 16px;
  font-family: Roboto-light;
    font-size: 12px;
  color:#767676;
}

.footerClass
{   background:#ffffff;
    position:device-fixed; 
    bottom:0px;
    padding: 16px 0px;  
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    }

.cameraImage
{

    width:initial;
    margin-left: 18px;
    cursor: pointer;


}

.inputComment
{

    margin-left: 10px;
    -webkit-box-flex:1;
    margin-right:10px;
    padding-right:10px;
}

.inputCommentTextBox
{
    width:100%;
    outline: 0;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    border-bottom-width: 1px;
    border-bottom-color:#767676;
    background-color: transparent;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;

}

.postImage
{

    width:initial;
    cursor: pointer;
    margin-right: 10px;


}

HTML:

<div id="mainComment" style="background-color:#ffffff; height:auto;padding-top:1px; padding: 1px 0px 20px;overflow-x:hidden;" >
    <div style="background-color:#ededed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;">
        <div style="-webkit-box-flex:1;-webkit-flex:1 100%;-ms-flex:1 100%;flex:1 100%;text-align: center;-webkit-align-self: center;-ms-flex-item-align: center;align-self: center;padding-top:4px;padding-left: 20px;">Comments</div>
        <div class="cameraImage showPen"><img data-ng-click="returnBack()" style="width: 35px;height: 35px;padding: 10px;" src="close.png" alt="Camera Image"/></div>
    </div>

    <div data-ng-repeat="name in names" >

        <div  class="main" style="background:#ffffff;padding: 10px;">
            <div class="imageIcon"><img style="height:56px;width:56px;"src="user.png" alt="UserMale" /></div>
            <div class="contentDiv">        
                    <div class="nameAndId">{{name}},<p class="ID"> {{xyz}}</p></div>
                    <div class="commentDetails">{{abc}}</div>
                    <div class="updateTime timeago" title="" >{{yzk}} ago</div>
            </div>
        </div>
        </div>

    <div id="footerId" class="footerClass" >
            <div class="cameraImage showPen" data-ng-show="false"><img data-ng-click="returnBack()" style="width:20px;height:20px;" src="close.png" alt="Camera Image"/></div>
            <div class="inputComment"><input onfocus="this.value = this.value;" id="commentBox" data-ng-model="commentData" type="text" placeholder="Write your Comment" class="inputCommentTextBox"></div>  
            <div class="postImage"  data-ng-show='postSelector'><img  style="width:26px;height:22px;" src="send.png" alt="Search Image"/></div>
            <div class="postImage" data-ng-show='loadMoreContentComment'>

            </div>
    </div>
</div>

所以每当我将注意力集中在输入 int 上时，固定的页脚就会从它的位置移位并向上移动。

请给我建议解决方案，因为我已经经历了很多解决方案但还没有运气。

谢谢

Answer 1

试试这个

$("input").on("focus", function(event){
    if(event.handled !== true)
    {
        $(".footerClass").css({ 'position': 'absolute' });
        $(".footerClass").css('display', 'none');        
    }
    return false;
});

$("input").on("blur", function(event){
   if(event.handled !== true)
   {        
      if(!$("input").is(":focus")){
          $(".footerClass").css({ 'position': 'fixed' })
          $(".footerClass").css('display', 'block');           
      }
   }
   return false;
});