绝对定位软键盘弹出时顶起底部按钮

最新推荐文章于 2024-05-14 15:46:55 发布

weixin_30876945

最新推荐文章于 2024-05-14 15:46:55 发布

阅读量211

点赞数

文章标签：移动开发操作系统 javascript ViewUI

原文链接：http://www.cnblogs.com/beimingbingpo/p/10129470.html

版权

android使用window.resize

苹果软键盘时候，window.resize不起作用

https://blog.csdn.net/u012982629/article/details/81905894

还一个方法，就是使用媒体查询@media，但是局限性很大

@media (max-height: 400px) { 
  .footer {
    display: none; } }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>h5软键盘兼容性</title>
</head>
<body>
<style>
*{
    box-sizing: border-box;
}
body,html,div{
    margin:0;padding:0;
}
.head{
    margin:1rem;
}
.footer{
    padding:1rem;
    position: fixed;
    left:0;
    width:100%;
    bottom:0;
}
.button{
    height:2rem;
    border-radius: .3rem;
    background: blue;
    color:#fff;
    text-align: center;
    line-height: 2rem;
}
</style>
<div class="head">
    <input type="text" value="" placeholder="测试">
</div>
<div class="footer">
    <div class="button">确定</div>
</div>
<script src="./js/jquery.min.js"></script>
<script>
    $(function(){
        //android
        var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
        window.onresize=function(){
            var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
            if(resizeHeight-0<originalHeight-30){
                 //软键盘弹出
                 $(".footer").hide();
            }else{
                 //软键盘收起
                $(".footer").show();
            }
        }
        //ios
        if(isIphone()){
            document.body.addEventListener('focusin', function(){
                //软键盘弹出
                $(".footer").hide();
            })
            document.body.addEventListener('focusout', function(){
                //软键盘收起
                    $(".footer").show();
            })
        }
    })
    function  isIphone(){
        var u = navigator.userAgent;
          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          return isiOS;
    }


    //说明：详见博客
    //https://blog.csdn.net/u012982629/article/details/81905894
    /*function isAndroid(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid;
    }*/
</script>
</body>
</html>

转载于:https://www.cnblogs.com/beimingbingpo/p/10129470.html

weixin_30876945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位软键盘弹出时顶起底部按钮

android使用window.resize苹果软键盘时候，window.resize不起作用https://blog.csdn.net/u012982629/article/details/81905894还一个方法，就是使用媒体查询@media，但是局限性很大@media (max-height: 400px) { .footer { display: non...
复制链接

扫一扫