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布局可以直接避免这个问题！！强烈推荐