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

最新推荐文章于 2020-09-25 09:51:26 发布

aSuncat

最新推荐文章于 2020-09-25 09:51:26 发布

阅读量1w

点赞数

文章标签： html css jquery 移动开发登录

本文链接：https://blog.csdn.net/aSuncat/article/details/52084466

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、正确做法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这样做。

aSuncat

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
移动端内容显示在一页时，虚拟键盘输入与position：fixed的冲突解决

一、正确做法1（适用于内容全部显示在一页）： 1、代码片段：...<style> *{ margin:0; padding:0; } html{ height:100%;/*关键代码*/ } body{ background-color:#fff; font-size:14px
复制链接

扫一扫