手机移动端HTML页面被软键盘顶上去问题解决-附代码

哆啦唉m

已于 2022-07-11 14:03:55 修改

阅读量1.6k

点赞数

分类专栏： Web 文章标签： js css3 html5

于 2021-03-31 22:43:02 首次发布

本文链接：https://blog.csdn.net/qq_33791597/article/details/113418773

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

手机移动端HTML页面被软键盘顶上去问题解决-附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emmmm</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        .class-input {
            position: fixed;
            bottom: 0;
            z-index: 99999;
            width: 100%;
            height: 3rem;
            float: left;
            background-color: rgba(160, 160, 160, 0.64);
            left: 0;
        }
    </style>
</head>
<body>


<div id="name_div">
    <input type="text" id="name" style="width: 100%; height: 2rem" placeholder="姓名">
</div>



<div id="age_div">
    <input type="text" id="age" style="width: 100%; height: 2rem" placeholder="年龄">

</div>

<div id="sex_div">

    <input type="text" id="sex" style="width: 100%; height: 2rem" placeholder="性别">
</div>


<script type="text/javascript">

    if (isAndroid() && notPC()) {//是安卓机并且不是PC

        输入框绑定事件  input点击赋予css属性
        $("#name").focus(function () {
            $("#name_div").addClass('class-input');

        });

        $("#age").focus(function () {
            $("#age_div").addClass('class-input');
        });

        $("#sex").focus(function () {
            $("#sex_div").addClass('class-input');
        });
        

    }


    var winHeight = $(window).height();   //获取当前页面高度
    $(window).resize(function () {
        var thisHeight = $(this).height();
        if (winHeight - thisHeight > 50) {
            //当软键盘弹出，在这里面操作

        } else {
            //当软键盘收起，在此处操作
            $("#name_div").removeClass('class-input');
            $("#sex_div").removeClass('class-input');
            $("#age_div").removeClass('class-input');
            $("#name").blur();
            $("#sex").blur();
            $("#age").blur();

        }
    });


    function isAndroid() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
            //这个是安卓操作系统
            return true;
        }
        if (isIOS) {
            //这个是ios操作系统
            return false;
        }
    }

    function notPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = false;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = true;
                break;
            }
        }
        return flag;
    }

</script>
</body>
</html>