如何让软键盘显示在 HTML5/CSS3 网站中？答案

【问题标题】：How to get a soft keyboard to display in a HTML5/CSS3 website?如何让软键盘显示在 HTML5/CSS3 网站中？
【发布时间】：2014-03-13 00:02:47
【问题描述】：

我正在开发一个移动网络应用程序，当输入字段被聚焦时，我遇到了 Android 软键盘的问题。

当我聚焦输入字段时，会出现软键盘。在 Windows Phone 上（在 7.8 上测试）整个页面，所以整个 DOM 上升为软键盘腾出空间。对于 Android（以及在 Google Chrome 上），一些元素会留在原处，而其他元素会在软键盘打开时上升。我怎样才能让整个 DOM，或者实际上是页面的孔体向上为 Android 上的软键盘腾出空间（我还没有在 iOS 上测试过）。

以下是 Android 键盘打开时的几张截图：

正常时页面的外观如下：

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

我怎样才能得到这个效果？：

【问题讨论】：

也许css会有所帮助。如果您使用的是固定位置，那就是问题所在。
我使用绝对位置，不是固定的。但是如果没有绝对，页面就会变得疯狂，到处都是漂浮的元素。包含所有内容的主要包装器具有位置：absolute.
尝试更改它并测试是否有变化。我无法确定浏览器将如何解释这些位置，但我很确定这就是问题所在。
好吧，我已经在 iOS 上测试过了，它工作得很好。所以只有 Android 会引起麻烦（没想到……在 HTC One 上测试过）。包装器具有绝对位置，以及标题、徽标等，但它们必须具有绝对位置才能留在正确的位置。我真的不知道该怎么办。
每个浏览器的实现方式都不同，因此 Android 不会在显示键盘后调整绝对位置。尝试在 document.ready() 上使用它---> $('#appMain').resize();

标签： javascript android html css keyboard

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

【讨论】：