移动端软键盘收起监听

　　在移动端进行表单操做时，时常须要监听键盘的收起，从而完成输入的处理。但浏览器并无提供直接监听软键盘收起的接口，那该如何进行监听能？这里提供 监听的兼容方案。

　　 在安卓下，大部分浏览器在软键盘收起时，会 触发resize事件，能够以此来监听；但 ios操做系统并不会触发该事件，但大部分浏览器会 触发表单的 blur事件，因此能够以此为监听点。浏览器的软件盘监听情况以下表所示：

 

　　  

                                                                      软键盘收起事件监听表 

 

　　因此，经过监听onResize、onBlur能够实现移动端主流浏览器的软键盘收起操做；没法即时监听到的，能够监听表单项的onblur事件，在表单项失焦时，作相应处理操做［比收起操做延时，但结果一致］。相应代码以下：

　　兼容1：监听resize

watchKeybord() {
    let me = this
    let oriWinHeight = window.innerHeight
    window.onresize = function() {
        me.isKeybordAvail = true
        let newHeight = window.innerHeight

        // 阀值大于140判断为键盘收起
        if (newHeight - oriWinHeight > 140) {
            me.oprNum('input')
        }
        oriWinHeight = newHeight
    }
}        

　　其中的me.isKeybordAvail = true，用来标注该浏览器环境下可使用resize进行监听；另140是一个预估值的阀值，用来排除其余的resize操做。仅resize的高度差大于140时，才被识别为软键盘交互，不然不是。如浏览器的工具栏、搜索栏的隐藏，window的窗口页会有一个较小的变化。

 

　　兼容2：监听失焦blur

setTimeout(function() {
    // 判断是否可用resize监听
    if (me.isKeybordAvail) {
        return
    }
    if (!newValue) {
        me.oprNum('input')
    }
}, 0)        

        其中的isKeybordAvail，是为了判断是否能够经过监听resize处理键盘收起，若是是，则不处理blur。此处使用了setTimeout(function(){}, 0)，它的做用是，将失焦操做延迟到下一个事件循环当中，确保resize事件已经触发，isKeybordAvail已是正确的值。 

 

　　总结，如表中，浏览器表现为四种不一样的状况，将有不一样的处理：

　　　　浏览器类型1：经过resize事件触发；

　　　　浏览器类型2：经过resize事件触发；

　　　　浏览器类型3：经过blur事件触发；

　　　　浏览器类型4：经过延迟的blur事件触发。［并不是真正的键盘收起］   

　　如上，经过兼容使用resize和blur的方法，实现键盘收起的监听。