ios - Apache Cordova IOS键盘移动页眉和页脚

我的主要问题是Apache Cordova。这是iOS特有的问题。我正在使用jQuery-mobile。只要在listview控件上进行搜索，然后固定位置的页眉，页脚和搜索输入向下移动，就会出现问题。

这是我页面的标记。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Contacts</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.min.css" rel="stylesheet" />
  </head>
  <body>
    <style>
      #my-wrapper
      {
        padding-top: 81px;
        background-color: rgb(250, 246, 246);
      }
      #my-wrapper form {
        position: fixed;
        left: 2%;
        right :2%;
        top: 35px;
        width: 96%;
        z-index: 2;
        background-color: rgb(250, 246, 246);
        border-color : rgb(120, 120, 120);
        text-shadow:unset;
        box-shadow:unset;
      }
      #ContactHeader
      {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 1;
      }
    </style>
    <div id="employeeListPage" data-role="page" >
      <div id="ContactHeader" data-role="header" style="height:32px ; ">
        <a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a>
        <h2>Contacts</h2>
      </div>
      <div id="my-wrapper" data-role="main">
        <ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll"  data-filter-placeholder="Search Contacts/Companies" ></ul>
      </div>
      <div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div>
      <div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/contactlist.js"></script>
  </body>
</html>

当用户开始在搜索栏中输入内容时，还会触发一个事件

$(document).on("pagecreate", "#employeeListPage", function () {
  $("#employeeList").on("filterablebeforefilter", function (e, data) {
    var URL = window.localStorage.getItem("ContactsForSearch");
    URL = URL + '/' + nextNo + '/' + value;
    $.getJSON(URL, function (info) {
      if (info.length === 0) {
        nomoredata = true;
        //alert('no more data to display');
        $('#employeeList').append('<br>');
        $('#employeeList').append('<center><h2>No Data <h2>   </center>');
      }
      else {
        $('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a    data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2>    <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>');
      }
    });
  });
});

每当您从列表顶部搜索时:

ios - Apache Cordova IOS键盘移动页眉和页脚-LMLPHP

如果您向下滚动并开始在搜索栏中输入内容，则会发生这种情况...这些屏幕截图是从xcode的模拟器上截取的，在手机上，除在底部弹出键盘外，其结果相同。

最佳答案

这将解决滚动标题的问题:

if (window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }

不幸的是，它也删除了“完成”按钮!!!