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

本文介绍了一种防止手机键盘弹出时页面元素变形或移位的方法,通过JavaScript监听窗口大小变化,动态调整body高度,并隐藏footer,确保表单区域不被键盘遮挡,同时使用CSS定位和背景图片覆盖技术提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值