移动端内容显示在一页时，虚拟键盘输入与position：fixed的冲突解决

最新推荐文章于 2023-02-17 16:30:12 发布

原创最新推荐文章于 2023-02-17 16:30:12 发布 · 1.1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #jquery #移动开发 #登录

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了两种在移动端网页设计中保持底部元素如联系信息始终固定在屏幕底部的方法，并对比了固定定位等常见但存在缺陷的技术方案。

一、正确做法1（适用于内容全部显示在一页）：
1、代码片段：

...
<style>
    *{
        margin:0;
        padding:0;
    }
    html{
        height:100%;/*关键代码*/
    }
    body{
        background-color:#fff;
        font-size:14px;
        color:#222;
        width:100%;
        height:100%;/*关键代码*/
    }
    li{
        list-style-type:none;
    }
    a:link,a:visited,a:hover,a:active{
        text-decoration:none;
    }
    /*导航栏*/
    nav{
        width:100%;
        height:44px;
        background-color:#ff9137;
        color:#fff;
        line-height:44px;
        font-size:18px;
        text-align:center;
        padding-left:10px;
        padding-right:30px;
    }
    nav a{
        float:left;
    }
    nav img{
        width:20px;
        height:20px;
        vertical-align:middle;
    }
    /*主体内容*/
    :-moz-placeholder{
        color:#999; /*mozilla ff 4-18*/
    }
    ::-moz-placeholder{
        color:#999; /*mozilla ff 19+*/
    }
    :-ms-input-placeholder{
        color:#999; /*ie 10+*/
    }
    ::-webkit-input-placeholder{
        color:#999; /*webkit browsers*/
    }
    input[type=text],select,input[type=password]{
        border:none;
        outline:none;
        background-color:#fff;
        color:#999;
        appearance: none;
        -moz-appearance:none;
        -webkit-appearance: none;
        padding-left:1px;
        text-align:left;
        height:26px;
        width:100%;
    }
    select::-ms-expand{
        display:none;
    }
    .logo{
        text-align:center;
        padding-top:15px;
        padding-bottom:33px;
    }
    .logo img{
        width:80px;
        height:80px;
    }
    .loginContent{
        margin-left:50px;
        margin-right:50px;
    }
    .userName,.psd{
        border-bottom:1px solid #999;
        padding-left:28px;
    }
    .userName{
        background:url(../img/user-yellow.png) no-repeat;
        background-size:24px 24px;
        padding-bottom:5px;
        margin-bottom:18px;
    }
    .psd{
        background:url(../img/password-yellow.png) no-repeat;
        background-size:24px 24px;
        padding-bottom:5px;
        margin-bottom:28px;
    }
    .forgetPsd a{
        border-bottom:1px solid #999;
        color:#999;
        font-size:12px;
        padding-bottom:2px;
    }
    button{
        width:100%;
        padding-top:10px;
        padding-bottom:10px;
        border:none;
    }
    .btn1{
        background-color:#ff9137;
        color:#fff;
        border-radius: 6px;
        outline:none;
        margin-bottom:16px;
        font-size:15px;
    }
    .btn2{
        background-color:#fff;
        color:#ff9137;
        outline:none;
        font-size:15px;
    }
    .contact{
        text-align:center;
        color:#999;
        font-size:12px;
    }
    .error{
        font-size:12px;
        color:#ff9037;
    }
</style>
</head>
<body>
    <div class="content">
        <!--导航栏-->
        <nav>
            <a href="#"><img src="../img/back.png"></a>
            登录
        </nav>
        <!--主体内容-->
        <div class="logo">
            <img src="../img/logo-yellow.png">
        </div>
        <div class="loginContent">
            <form id="frmLogin" autocomplete="off">
                <div class="userName">
                    <input type="text" name="userName" placeholder="请输入账号">
                </div>
                <div class="psd">
                    <input type="password" name="psd" placeholder="请输入密码">
                </div>
                <div>
                    <button class="btn1">登录</button>
                </div>
            </form>
            <div>
                <a href="inc.html"><button class="btn2">注册</button></a>
            </div>
        </div>
    </div>
    <div class="contact">
        <p>忘记账号、忘记密码等账号相关问题请联系我们</p>
        <p>联系电话：82624787</p>
    </div>
<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
    //  密码验证：在6位数以上
    $(function(){
        $("#frmLogin").validate({
            rules:{
                userName:{
                    required:true
                },
                psd:{
                    required:true,
                    minlength:6
                }
            },
            messages:{
                userName:{
                    required:"请输入账号"
                },
                psd:{
                    required:"请输入密码",
                    minlength:"请输入6位以上密码"
                }
            }
        });

        /*让最下方的联系我们这个div距离下底边26px*/   /*关键代码*/
        var wContact=$('body').height()-$('.content').outerHeight();
        var w=wContact-80;
        $('.contact').css('margin-top',w);
    });
</script>
...

2、呈现效果：
（1） iphone5
（2） iphone6p
3、备注：
（1）jquery中的这段代码起决定作用：

    /*让最下方的联系我们这个div距离下底边26px*/
    var wContact=$('body').height()-$('.content').outerHeight();
    var w=wContact-80;
    $('.contact').css('margin-top',w);

步骤：①设置html、body的高度为100%，目的是可以得到屏幕高度
②var wContact=$('body').height()-$('.content').outerHeight();得到注册下面的所有空间的高度
③var w=wContact-80; 80其实是给忘记密码和下面的空白留的高度
④$('.contact').css('margin-top',w);将‘.contact’上的空白设置成动态的，给‘.contact’以及下面的空白留一定高度，这样就能实现移动端，忘记密码等内容距离底端一定距离，而且在不同手机都有这样的效果。
（2）’.contact’以上的内容还是比较挤的，实际是为了让iphone4这样的小手机也显示在一页中，所以给他们的高度就比较少。
（3）$('.contact').css('margin-top',w)设置时w不要加”，也可以写成$('.contact').css('margin-top',w+'px')。
4、其实还可以在’.contact’上增加一个div，然后动态设置这个div的高度，就不设置’.contact’的margin-top，其实是一样的效果，但是这样会增加冗余的代码，因为添加了一个空白的div，所以还是比较提倡设置margin-top.

二、正确做法2（内容不在一个页面时，可以用。但是不管内容是否在一个页面，都会有小bug，下面会提到）：
1、代码片段：
（1）增加css

.contact{
        background-color:#f00; 
        position:fixed;
        left:0;
        right:0;
        bottom:0;
    }

（2）修改script

        /*方法1：输入框获得焦点时，让固定定位的内容变成正常的static定位，失去焦点后变成固定定位*/
        $('input').focus(function(){
            $('.contact').css('position','static');
        }).blur(function(){
            $('.contact').css('position','fixed');
        });
        /*方法2：输入框获得焦点时，让固定定位的内容消失，失去焦点后正常*/
        $('input').focus(function(){
            $('.contact').hide();
        }).blur(function(){
            $('.contact').show();
        });

2、呈现的效果大家都能想到，便不再截图。
3、备注：
（1）以上2种方法效果基本能正常，在输入框获得焦点时，内容不会浮到正常流中。
（2）bug:
①就方法2来说（方法1同理），在键盘获取焦点事件发生后，“键盘弹出”会先于“’.contact’消失”发生，所以’.contact’的内容会先浮到正常流中，然后再消失。在键盘失去焦点事件发生后，“‘.contact’出现”会先于“键盘弹出”发生，所以‘.contact’的内容会先浮到正常流中，然后再随键盘的消失而恢复到固定定位的地方。即在获取焦点事件发生后几秒钟和失去焦点事件发生后几秒钟，还是会发生以下情况（为了效果明显，将固定定位的内容颜色改成红色）：
sumsung
② sumsung
方法2来说（方法1同理），画红色圈圈的地方点击后，键盘会消失，但是并没有引发焦点失去事件，这时’.contact’的内容还是处于消失状态。

三、错误示范1：
1、代码片段：
（1）增加css

.contact{
        margin-top:50px;
    }

（2）删除script
即删除对margin-top的动态设置
2、呈现效果：
（1） iphone4
（2）
3、备注：
（1）很明显，‘.contact’距离上边的距离不会动，在iphone4中做到和正确做法1一样的效果，但是在iphone6p中就不行了。所以固定margin-top不能使底部内容随手机屏幕大小而固定在距离底部一定距离。

四、错误示范2：
1、代码片段：
（1）增加css：利用固定定位

.contact{
        width:100%;
        position:fixed;
        left:0;
        bottom:20px;
    }

（2）删除script
即删除对margin-top的动态设置
2、呈现效果：
（1）不输入内容是都正常，效果和正确做法的效果一样。
（2）聚焦开始输入内容时，效果如下：
sumsung
3、备注：
（1）不管是固定定位还是绝对定位，都会产生和上图一样的效果。
（2）只要有开始输入内容，弹出键盘时，就默认键盘顶端的线是窗口的底端，’.contact’就会距离键盘顶端20px，这样就会和其他内容重叠。
四、总结：
如果不需要输入内容时，要呈现像正确做法1一样的效果的话，可以用固定定位，这样比较方便，但是如果要输入内容的话，还是用正确做法1这样做。