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

标签 ios cordova jquery-mobile-listview

我的主要问题是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>');
      }
    });
  });
});

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

enter image description here

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

enter image description here

最佳答案

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

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

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

关于ios - Apache Cordova IOS键盘移动页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33730082/

相关文章:

ios - 在 Xcode 5 中向 super View 添加间距约束

ios - WKWebView 在打开相机 Swift 时关闭

jquery - 添加更多数据属性到 jquery 移动 ListView 中的拆分图标

jquery - 在 jquery mobile 中使用 for 循环将 <li> 添加到 <ul>

ios - 检查NSData是否包含特定值的条件语句

android - 为什么我的 GCM 通知被截断了? (Cordova PushPlugin)

java - Android & PhoneGap——在 NPObject 上调用方法时出错

android - 旧 Android SDK 版本中的 "Falling back on PROMPT mode since _cordovaNative is missing"错误

javascript - jQuery 手机 : How To Put Listview Popup on Top of Page Content?

iphone - 自定义相机旋转问题