h5 监听 用户点击 input 输入框 弹起软键盘

其实 判断的依据就是 根据 用户点击 输入框  软键盘弹起来之后 引起 视口  （可视化区域） 高度大小的变化     整体可能会发生向上移动的效果

// 进入页面之后 我们先获取一次 可视化区域的高度  这个时候 啥操作 还没做 属于正常的情况 

var initHeight = document.documentElement.clientHeight ||document.body.clientHeight;

然后监控 窗口 变化的  回调函数  进行对比判断     然后分别在 弹起 和收起来的过程中做一些事情

 window.onresize = function(){
            //键盘弹起 或者 收起来  引起的 窗口 高度 的变化  再次获取下 窗口 高度  
            //   和进入页面的时候 获取的的窗口  进行对比
            var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
                if(resizeHeight < initHeight){
                    // 软键盘弹起，在此做一些操作
                     .....
                    
                }else{
                    // 软键盘收起，在此做一些操作
                    .....
                }
        }

关注我   持续更新前端 知识