如何使软键盘显示在HTML5 / CSS3网站中？

Question

我正在开发一个移动Web应用程序，并且在输入字段为焦点时Android软键盘有问题。

当我聚焦输入字段时，出现软键盘。 在Windows Phone（经过7.8测试）上，整个页面都在显示，因此整个DOM都增加了，为软键盘腾出了空间。 使用Android（以及在Google Chrome上）时，某些元素会保留在原处，而其他元素会在软键盘打开时上升。 如何获得整个DOM，或者实际上如何获取页面的空洞主体，以便为Android上的软键盘腾出空间（我尚未在iOS上对此进行测试）。

这是打开键盘后在Android上的一些屏幕截图：

这是正常页面的外观：

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

如何获得此效果？：

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 个解决方案

解决方案1
0 2014-03-13 14:25:49

如何使软键盘显示在HTML5 / CSS3网站中？

问题描述

1 个解决方案

解决方案1 0 2014-03-13 14:25:49

解决方案1
0 2014-03-13 14:25:49