移動端軟鍵盤彈出影響頁面佈局問題

牛什麼瑩發表於2019-02-16
移動端中軟鍵盤彈出影響頁面佈局

在一個移動端的頁面上的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>

相關文章