移动端软键盘收起监听

移动端软键盘收起监听

因此通过监听可以实现主流手机浏览器的软键盘收起操作；如果不能立即监听，可以监听表单项的事件，当表单项失去焦点时，进行相应的处理操作【比收起操作有延迟，但是结果是一样的】。对应代码如下：

兼容1：监控

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.=true 用来标记浏览器环境可以监控；另外 140 是一个预估阈值，用来排除其他操作。只有高度差大于 140 才识别为软键盘交互，否则不识别。比如浏览器工具栏或者搜索栏隐藏，窗口页面会有小的变化。

兼容性 2：显示器模糊

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

这样做的目的是通过监控来判断键盘是否可以收回，如果可以，就不处理blur。这里用到了((){}, 0)，将失焦操作延迟到下一次事件循环，确保事件已经触发，并且有正确的值。

总结一下，如表所示，浏览器在四种不同情况下的行为会有所不同，处理方式也不同：

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

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

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

浏览器类型 4：由延迟的模糊事件触发。[不是真正的键盘折叠]

如上，通过兼容使用和模糊的方法实现键盘折叠的监控。