Question

我正在使用移动网络应用程序，当输入字段聚焦时，我遇到Android软键盘问题。

当我对输入字段进行聚焦时，会出现软键盘。在Windows Phone（在7.8上测试）整个页面，所以整个DOM上升为软键盘腾出空间。使用Android（以及谷歌浏览器），一些元素会保持原样，而其他元素则会在软键盘打开时上升。我如何才能获得整个DOM，或者实际上，页面的孔体为Android上的软键盘腾出空间（我还没有在iOS上测试过这个）。

以下是打开键盘时Android上的一些屏幕截图：

以下是正常情况下页面的样子：

a busy cat http://i61.tinypic.com/2zflkw1.png

这就是打开软键盘时的样子：

a busy cat http://i58.tinypic.com/3160yo6.png

如何获得此效果？：

a busy cat http://i61.tinypic.com/msg2a.png

Answer 1

这是我的源代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex" />
<!-- CSS -->
<style>
    @charset "UTF-8";

    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    input, textarea, button {
        outline: none;
    }

    #appMain {
        position: absolute;
        width: 100%;
        max-width: 640px;
        height: 100%;
        background: url(static/img/static/main_bg.fw.png) no-repeat;
        background-size: cover;
    }

    #appHeader {
        position: absolute;
        margin: 0;
        width: 100%;
        height: 50px;
        background: #007EA8;
    }

    #headerUnderline {
        position: absolute;
        margin-top: 50px;
        width: 100%;
        height: 5px;
        background: #CCC;
    }

    #headerLogo {
        position: absolute;
        left: -50px;
        width: 125px;
        height: 72px;
        background: url(static/img/static/sprite.fw.png);
        background-position: 0 0;
    }

    #mainLogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 100px;
    }

    #mainSlogan {
        width: 100%;
        text-align: center;
        font: 20px sans-serif;
        color: #FFF;
        text-shadow: 1px 1px 1px #000;
    }

    #footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 50px;
        background: red;
    }

    #facebook {
        margin: 0;
        padding-left: 30px;
        float: left;
        width: 50%;
        height: 100%;
        font: 14px sans-serif;
        color: #FFF;
        background: #003A75;
        border: 0;
        text-shadow: 1px 1px 1px #000;
    }

    #signIn {
        margin: 0;
        float: right;
        width: 50%;
        height: 100%;
        font: 14px sans-serif;
        color: #FFF;
        background: #007900;
        border: 0;
        text-shadow: 1px 1px 1px #000;
    }

    #facebookLogo {
        position: absolute;
        left: 4%;
        top: 10px;
        width: 16px;
        height: 30px;
        background: url(static/img/static/sprite.fw.png);
        background-position: -160px -30px;
    }

    #fieldHolder {
        position: absolute;
        width: 100%;
        bottom: 100px;
    }

    .accountField {
        margin-bottom: -2px;
        padding-left: 5px;
        width: 100%;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font: 14px sans-serif;
        color: #333;
    }

    .accountField:focus {
        background: #FFF;
    }

    .accountField::-webkit-input-placeholder {
       color: #FFF;
    }

    .accountField2::-moz-placeholder {  /* Firefox 19+ */
       color: #FFF;  
    }

    .accountField:-ms-input-placeholder {  
       color: #FFF;  
    }

    #subFooter {
        position: absolute;
        bottom: 65px;
        width: 100%;
    }

    #signUpButton {
        margin-left: 10px;
        float: left;
        background: none;
        border: 0;
        font: 14px sans-serif;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 1px #000;
        text-decoration: none;
    }

    #forgotButton {
        margin-right: 10px;
        float: right;
        background: none;
        border: 0;
        font: 14px sans-serif;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 1px #000;
        text-decoration: none;
    }
</style>
    <!-- JS -->
<script src="static/js/includes/jquery_m.js"></script>
<script src="static/js/includes/jquery.js"></script>
</head>
<body>
<div id="appMain">
    <div id="appHeader">
        <div id="headerUnderline"></div>
        <div id="headerLogo"></div>
    </div>
    <img id="mainLogo" src="static/img/static/main_logo.fw.png" alt="Welcome to     Scrapll!" />
    <h1 id="mainSlogan">The Private Social Network<h1>
    <form action="login.php" method="post">
        <div id="fieldHolder">
            <input type="email" class="accountField" name="email" placeholder="Email Address" />
            <input type="password" class="accountField" name="password" placeholder="Password" />
        </div>
        <div id="subFooter">
            <a href="index.php" type="button" id="signUpButton" data-transition="slide">Sign Up</a>
            <a href="index.php" type="button" id="forgotButton" data-transition="slide">Forgot password</a>
        </div>
        <div id="footer">
            <input type="submit" id="signIn" value="Sign In" />
    </form>
            <button type="button" id="facebook">Login with Facebook</button>
            <div id="facebookLogo"></div>
        </div>
</div>
</body>
</html>

HTML5 / CSS3网站和软键盘

1 个答案: