0

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; }
4

1 に答える 1

0

この厄介な Android の問題を解決する最も簡単な方法は、入力の focus および blur イベントを使用することです。

jQuery の場合:

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

$("input").blur(function(){
    $('footer').show();
});
于 2013-10-08T14:36:12.090 に答える