0

I'm writing an HTML5 application using PhoneGap 2.5.0.

In some portions of the app, like the search page, when the virtual keyboard appears, it shrinks the entire page, so I can still see the footer right above the keyboard.

However in other portions of the app, like a dialog box, the keyboard covers the page, thus potentially covers some of the fields.

I don't use any "fixed" positioned elements in the app. All elements required to stay in the same place were made "absolute".

When does the keyboard is placed over the view and when does it shrinks it? I couldn't find the answer so far.

The relevant 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>

And the relevant CSS (not perfect yet, I'll try to improve it later on, but it contains the basic rules I'm using, not including visual styles like colors, gradients, shadows, etc.):

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 讨厌的最简单方法是使用输入焦点和模糊事件。

在 jQuery 中：

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

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