移动端软键盘弹出影响页面布局问题

2024年1月13日 98次阅读 来源: 牛什么莹
移动端中软键盘弹出影响页面布局

在一个移动端的页面上的input中输入时，弹出的软键盘会占据window的位置。
如果当前页面的中有绝对定位的元素，例如在页面底部有一个position：fixed;bottom:0;的按钮，当软键盘弹起时，window的高度是窗体的顶部到软键盘之上，底部绝对定位的元素就会覆盖在输入框之上，影响输入。
这个问题一般出现在Android系统中。

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>安卓端软键盘问题</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        html,body,div{margin: 0;}
        .message{height: 100px;}
        .input-box{height: 50px;line-height: 50px;margin-top: 10px;padding: 10px;}
        .input-box label{display:inline-block;width: 50px;}
        .input-box input{width:80%;height: 30px;}
        .footer-nav{position: fixed;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;color: #ffffff;background-color: #055DAD;}
    </style>
</head>
<body>
<div class="container">
    <div class="message">
        页面底部有绝对定位的元素。
    </div>
    <div class="input-box">
        <label>姓名</label>
        <input type="text" placeholder="请输入姓名">
    </div>
    <div class="input-box">
        <label>电话</label>
        <input type="text" placeholder="请输入电话">
    </div>
    <div class="input-box">
        <label>电话</label>
        <input type="text" placeholder="请输入地址">
    </div>
    <div class="footer-nav">完成提交</div>
</div>
</body>
</html>

目前我是实践中解决这个问题是方法是：监控窗体的大小变化resize事件，窗体大小变化超过一定的阈值时，判断为软键盘弹出，弹出后将body元素的高度设置为软键盘弹出前的高度，软键盘关闭后将body元素的高度设置为100%

<script>
    var winHeight = $(window).height(); //获取当前页面高度  
    $(window).resize(function() {  
        //当窗体大小变化时
        var thisHeight = $(this).height();  //窗体变化后的高度
        if (winHeight - thisHeight > 50) {  
            /*
            软键盘弹出
            50是设置的阈值，用来排除其他影响窗体大小变化的因素，比如有的浏览器的工具栏的显示和隐藏
            */
            $('body').css('height', winHeight + 'px');  
        } else {   
            /*
            软键盘关闭
            */ 
            $('body').css('height', '100%');  
        }  
    }); 

</script>
    原文作者：牛什么莹
    原文地址: https://segmentfault.com/a/1190000012856789
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞