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

Question

I'm working on a mobile web application and I have a problem with the Android soft keyboard when an input field is focused. 我正在开发一个移动Web应用程序，并且在输入字段为焦点时Android软键盘有问题。

When I focus the input field, the soft keyboard appears. 当我聚焦输入字段时，出现软键盘。 On Windows Phone (tested on 7.8) the whole page, so the entire DOM goes up to make room for the softkeyboard. 在Windows Phone（经过7.8测试）上，整个页面都在显示，因此整个DOM都增加了，为软键盘腾出了空间。 With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. 使用Android（以及在Google Chrome上）时，某些元素会保留在原处，而其他元素会在软键盘打开时上升。 How can I get the whole DOM, or actually, the hole body of the page to go up to make room for the soft keyboard on Android (I haven't tested this on iOS yet). 如何获得整个DOM，或者实际上如何获取页面的空洞主体，以便为Android上的软键盘腾出空间（我尚未在iOS上对此进行测试）。

Here are a few screenshots on Android when the keyboard is opened: 这是打开键盘后在Android上的一些屏幕截图：

Here is what the page looks like when it's normal: 这是正常页面的外观：

And this is what it looks like when the soft keyboard is opened: 这是打开软键盘时的样子：

How can I get this effect?: 如何获得此效果？：

Answer 1

Here's my source code: 这是我的源代码：

<!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