веб-браузер android и виртуальная клавиатура

Я пишу приложение HTML5 с помощью PhoneGap 2.5.0.веб-браузер android и виртуальная клавиатура

В некоторых частях приложения, например, на странице поиска, когда появляется виртуальная клавиатура, она сжимает всю страницу, поэтому я могу видеть нижний колонтитул прямо над клавиатурой.

Однако в других частях приложения, как и в диалоговом окне, клавиатура закрывает страницу, поэтому потенциально может покрывать некоторые из полей.

Я не использую никаких «фиксированных» позиционированных элементов в приложении. Все элементы, необходимые для пребывания в одном и том же месте, были сделаны «абсолютными».

Когда клавиатура расположена над видом и когда она сжимает ее? Пока я не нашел ответа.

Соответствующий 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

Самый простой способ решить эту проблему андроид противный, чтобы использовать входы фокуса и размытия событий.

В JQuery:

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

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

источник

2013-10-08 14:36:12

веб-браузер android и виртуальная клавиатура

ответ

Смежные вопросы