[英]How to get a soft keyboard to display in a HTML5/CSS3 website?
我正在開發一個移動Web應用程序,並且在輸入字段為焦點時Android軟鍵盤有問題。
當我聚焦輸入字段時,出現軟鍵盤。 在Windows Phone(經過7.8測試)上,整個頁面都在顯示,因此整個DOM都增加了,為軟鍵盤騰出了空間。 使用Android(以及在Google Chrome上)時,某些元素會保留在原處,而其他元素會在軟鍵盤打開時上升。 如何獲得整個DOM,或者實際上如何獲取頁面的空洞主體,以便為Android上的軟鍵盤騰出空間(我尚未在iOS上對此進行測試)。
這是打開鍵盤后在Android上的一些屏幕截圖:
這是正常頁面的外觀:
這是打開軟鍵盤時的樣子:
如何獲得此效果?:
這是我的源代碼:
<!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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.