在iOS中显示虚拟键盘时固定位置不起作用

问题描述：

我正在开发一个使用Worklight 6.2的应用程序，其中布局在标题中有一个固定的研究字段，当此字段收到焦点时，操作的虚拟键盘系统呈现。在iOS中显示虚拟键盘时固定位置不起作用

当布局不是开始的时候（被滚下来），在iOS（iPhone 4和iPhone 5的布局大于屏幕）上运行这个应用程序，顶部固定的div和输入（position：fixed ）会失去这种配置，并且与绝对布局类似。另一个问题是标题（div和输入）会自动剪切一些像素，并移动到屏幕的中心，并隐藏出现滚动页面的div。

下面是某些情况的打印和源代码与问题。

，而不显示虚拟键盘（正确的布局）
enter image description here

当显示虚拟键盘布局滚落
enter image description here

什么时候滚动与显示虚拟键盘页面（丢失该配置布局：固定并且显然呈现配置布局：绝对）
enter image description here

我的代码是：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 

     <style type="text/css"> 
      a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video 
      { 
       margin: 0; 
       padding: 0; 
       font-family: 'MuseoSans-100'; 
      } 

      /* Worklight container div */ 
      body { 
       height: 100%; 
       width: 100%; 
      } 

      .div-header { 
       height: 200px; 
       width: 100%; 
       background-color: #0094D9; 
       position: fixed; 
      } 

      .input-header { 
       margin-top: 100px; 
       height: 40px; 
       width: 100%; 
      } 

      .div-body { 
       height: 500px; 
       width: 100%; 
      } 

      .div-body-1{ 
       background-color: #ffff9f; 
      } 

      .div-body-2{ 
       background-color: #1b8127; 
      } 

      .div-body-3{ 
       background-color: #fb7d00; 
      } 
     </style> 

     <script>window.$ = window.jQuery = WLJQ;</script>   
    </head> 
    <body style="display: none;"> 
     <!--application UI goes here--> 
     <div id="wrapper"> 
      <div class="div-header"> 
       <label class="span-header">Hello Worklight</label> 
       <input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header"> 
      </div> 
      <div id="div1" class="div-body div-body-1"> 
       Div 1 
      </div> 

      <div id="div2" class="div-body div-body-2"> 
       Div 2 
      </div> 

      <div id="div3" class="div-body div-body-3"> 
       Div 3 
      </div> 
     </div> 



     <script src="js/initOptions.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/messages.js"></script> 
    </body> 
</html>

另外，我已经在iPhone模拟器在过去注意到这一点，但不是在一个设备。你在一个设备中测试这个吗？ – 2014-09-02 00:07:19

是的，这张图片是iPhone 5的屏幕截图，同样的问题发生在iPhone 4上。 – 2014-09-02 01:13:57

你解决了这个问题。我面临同样的问题。谢谢 – 2016-12-06 13:45:52

答

屏幕失真的问题，由于虚拟键盘可以通过在屏幕尺寸改变事件或情况下，如果在键盘隐藏上触摸任何元件然后onclick event加入$('body,html').animate({scrollTop:0},'fast');要么被解决。

答

我有同样的问题，将此插件添加到项目中修复它！

https://github.com/apache/cordova-plugins/tree/master/keyboard

将它添加后，设置Keyboard.automaticScrollToTopOnHiding = true;

，它会做的伎俩

在iOS中显示虚拟键盘时固定位置不起作用

相关推荐