webapp 虛擬鍵盤隱藏留下空白解決辦法

webapp中，input表單focus會觸發虛擬鍵盤彈出，blur會觸發虛擬鍵盤隱藏。

但是有時會出現，blur觸發了虛擬鍵盤隱藏，但是虛擬鍵盤的背景區域依然保留在原來的位置。

點擊body任何區域，或者在頁面中 alert() 阻塞一下，灰色背景就消失了；但是點擊或者alert()，都需要用戶再次操作，嚴重影響用戶體驗。

因此，在鍵盤隱藏后阻塞一下，改變可視區域可以讓灰色背景隱藏，也不影響用戶體驗。

 

這里是通過可視區域的高度來判斷虛擬鍵盤的顯示與隱藏。

js代碼如下：

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
$(window).on('resize', function () {
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
        //鍵盤彈出的事件處理
        $('.paymentWrap').css({ 'position': 'static' }); // 取消支付按鈕絕對定位，避免它移動到虛擬鍵盤上方
    }
    else {
        //鍵盤收起的事件處理
        $('.paymentWrap').css({ 'position': 'fixed' });  // 恢復支付按鈕絕對定位
        $('body').height(nowClientHeight-1);   // 改變body的高度
        // 阻塞一下才有效果
        setTimeout(function() {
            $('body').height(nowClientHeight); // 恢復body的高度
        }, 0);
    }
});

 

最后補充：移動端開發，用flex布局可以直接避免這個問題！！強烈推薦