android 웹 브라우저와 가상 키보드

PhoneGap 2.5.0을 사용하여 HTML5 애플리케이션을 작성하고 있습니다.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 웹 브라우저와 가상 키보드

답변

관련 문제