js：
//防止背景图被手机键盘压缩变形
$(document).ready(function () {
$(‘body‘).css({‘height‘:$(window).height()})
});
//当点击input出现手机键盘时，窗口大小改变，隐藏footer以防止footer被手机键盘顶上来
$(function(){
var oHeight = $(window).height(); //浏览器当前的高度
$(window).resize(function(){ //当浏览器窗口的大小改变时，发生 resize 事件。
if($(window).height() < oHeight){
$("#hui-footer").css("display","none");
}else{
$("#hui-footer").css("display","inline-flex");
}
});
})
css：
html,body{
height: 100%; //让没有内容的body撑起满屏
}
body{
position: relative;
background: url(img/register.jpg) center no-repeat;
background-size: cover;
}
.hui-form{
position: absolute;
top: 25%;
padding:10px;
opacity: 0.7;
}表单根据body定位，这样表单里的输入框那块就不会被手机键盘顶上去,body{ position: relative;}这个地方很重要。
html：
<body>
<div class="hui-wrap">
<div class="hui-form">
<form id="form1" action="" method="post">
<div class="hui-form-items">
<div class="hui-form-items-title">手机号码</div>
<input type="number" id="phone" name="phone" class="hui-input hui-input-clear" placeholder="请输入手机号码" value="18614522541"/>
</div>
<div class="hui-form-items">
<div class="hui-form-items-title">验证码</div>
<input type="text" id="vertify" name="vertify" class="hui-input hui-input-clear" placeholder="请输入短信验证码" value="4006337707"/>
<button id="icode1" type="button" class="hui-button hui-primary hui-button-small hui-fr identicode">获取验证码</button>
</div>
</form>
<div style="padding:20px 8px;">
<button id="loginbtn" type="button" class="hui-button hui-primary hui-button-large">登陆</button>
</div>
</div>
<div id="hui-footer" class="footer">
<div class="followup" id="delete" style="background-color: #007AFF;">确定</div>
<div class="followup" id="allot">取消</div>
</div>
</div>
</body>
原文地址：https://www.cnblogs.com/xi-li/p/10762811.html
时间： 2024-08-28 12:22:12