登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去

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>

posted on 2019-04-24 15:50 多年小白阅读(348) 评论(0) 编辑收藏举报