标题:webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题
通过js设置在需要的时候隐藏即可解决问题。
范例代码:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js">
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
div {
height: 200px;
line-height: 200px;
width: 100%;
}
.top {
background: #ccc;
margin-bottom: 10px;
}
#myinput {
height: 100px;
width: 80%;
margin: auto;
border:1px solid red;
}
.bottom {
background: #eee;
position: absolute;
bottom: 0px;
}
</style>
<title>测试</title>
</head>
<body>
<div class="top">【顶部区域】高度如果不够请自行调整</div>
<input type="text" id="myinput" placeholder="点击输入框试试">
<div class="bottom">
【底部区】 高度如果不够请自行调整
</div>
</body>
<script>
$("#myinput").bind('focus click',function(){
$('.bottom').hide(); //尝试注释掉这行后再运行看看。
});
$("#myinput").blur(function(){
$('.bottom').fadeIn();
});
</script>
</html>
输入法遮挡的情况
处理后的情况