How to get a soft keyboard to display in a HTML5/CSS3 website?
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.
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. With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. 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).
Here are a few screenshots on Android when the keyboard is opened:
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?:
1 answers
solution1
0 2014-03-13 14:25:49
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.