安卓網頁瀏覽器和虛擬鍵盤

我在寫一個使用PhoneGap 2.5.0的HTML5應用程序。安卓網頁瀏覽器和虛擬鍵盤

在應用程序的某些部分（如搜索頁面）中，當虛擬鍵盤出現時，會縮小整個頁面，因此我仍然可以在鍵盤上方看到頁腳。

但是在應用程序的其他部分，如對話框中，鍵盤覆蓋頁面，因此可能會覆蓋某些字段。

我沒有在應用程序中使用任何「固定」定位元素。所有留在同一地點的要素都是「絕對的」。

鍵盤放在視圖上的什麼時候？它什麼時候收縮？到目前爲止我找不到答案。

相關的HTML：

<body> 
    <div role="dialog" id="details"> 
     <div class="popup-content"> 
      <header> 
       <h1 role="heading">Details</h1> 
      </header> 
      <article> 
       <div class="content"> 
        <div class="label">Some Title</div> 
        <div id="dynamic_form"> 
         <form><!-- dynamically filled form --></form> 
        </div> 
       </div> 
      </article> 
      <footer> 
       <ul class="footer-nav-buttons"> 
        <li><a>Back</a></li> 
       </ul> 
      </footer> 
     </div> 
    </div> 

    <page id="search"> 
     <header> 
      <h1>Search</h1> 
     </header> 
     <article class="page-content"> 
      <div class="ui-header"> 
       <input name="searchterm" id="searchtermtextbox" value="" type="text"> 
      </div> 
      <article> 
       <div id="searchresultscontainer"></div> 
      </article> 
     </article> 
    </page> 

    <footer> 
     <ul class="footer-nav-buttons main-navigation-bar"> 
      <li><a href="#menu" role="menuitem" class="button-menu"></a></li> 
      <li><a href="#contacts" class="button-contacts"></a></li> 
      <li><a href="#search" class="button-search"></a></li> 
     </ul> 
    </footer> 
</body>

及有關CSS（不是很完美，我會盡力以後改進它，但它包含了我使用，不包括視覺的基本規則款式喜歡的顏色，漸變，陰影等）：

body { margin: 0; position: absolute; height: 100%; width: 100%; } 
page { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; } 
page.selected { display: block; } 
page>header { position: absolute; top: 0; left: 0; right: 0; height: 1cm; } 
page article { position: absolute; top: 1cm; left: 0; bottom: 15mm; right: 0; } 

div[role='dialog'] div.popup-content footer { position: relative; } 
div[role='dialog'].visible { opacity: 1; z-index: 100; } 
div[role='dialog'].active { display: -webkit-box; display: box; -webkit-box-align: center; } 
div[role='dialog'] div.popup-content article { position: relative; } 
div[role='dialog'] div.popup-content article div.content { position: relative; } 

body>footer { position: absolute; bottom: 0; left: 0; right: 0; height: 15mm; } 
ul.footer-nav-buttons { position: relative; display: -webkit-box; display: box; -webkit-box-align: center; 
         box-align: center; -webkit-box-pack: center; box-pack: center; list-style: none; 
         height: 100%; width: 100%; padding: 0; margin: 0; 
         -webkit-margin-before: 0;-webkit-margin-after: 0; -webkit-margin-start: 0; 
         -webkit-margin-end: 0; -webkit-padding-start: 0; } 
ul.footer-nav-buttons li a { margin: 5px; }

來源

2013-03-22 Itai Bar-Haim

請出示CSS，你使用的是什麼。這個問題可能在CSS中 – Harpreet 2013-03-22 10:45:26

解決這個機器人討厭的最簡單的方法是使用投入重點和模糊事件。

在jQuery中：

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
});

來源

2013-10-08 14:36:12

安卓網頁瀏覽器和虛擬鍵盤

回答

相關問題