模拟移动端键盘监听事件

本以为h5有直接键盘监听事件，查找资料之后发现没有，找到一篇大神的文章，很有用，感谢大神 原文链接https://www.jianshu.com/p/005eacc3bc34

好记性不如烂笔头

js是没有方法直接对软键盘进行监听的

如果非要监听，我们只能模拟

focus和blur是不会冒泡的，而focusin和focusout可以支持冒泡 所以我们可以用事件代理对focusout进行监听

window.addEventListener('focusout', () => {

    // doSomething

});

但是ios可以监听focusout事件，而安卓监听不到，安卓在收起键盘后，input仍处于focus状态，所以无法触发focusout事件

但是，天无绝人之路

安卓在收起键盘后，窗口高度会有所改变，也就是window.innerHeight会变化，ios不会

所以，

if (/Android/gi.test(navigator.userAgent)) {

      /**

      * 模拟安卓监控键盘弹出收起事件

      */

      const innerHeight = window.innerHeight

      window.addEventListener('resize', () => {

        const newInnerHeight = window.innerHeight

        if (innerHeight > newInnerHeight) {

          // 键盘弹出事件处理

        } else {

          // 键盘收起事件处理

          // this.showSearchInput = false

        }

      })

    } else {

      /**

      * 模拟ios监控键盘弹出收起事件

      */

      window.addEventListener('focusin', () => {

        // 键盘弹出事件处理

      })

      window.addEventListener('focusout', () => {

        // 键盘收起事件处理

        // this.showSearchInput = false

      })

    }