解决安卓键盘收起表单无法失去焦点问题

<template>
  <div class="home">
    home
    <input
      v-model="msg"
      type="text"
      class="username input-hook">
    <div>
      {{ msg }}
    </div>
    <div class="submit">提交</div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data () {
    return {
      msg: ''
    }
  },

  mounted () {
    const el = document.documentElement || document.body
    const originHeight = el.clientHeight
    window.addEventListener('resize', () => {
      const resizeHeight = el.clientHeight
      if (resizeHeight < originHeight) {
        console.log('键盘弹起')
      } else {
        console.log('键盘收起')
        const likeArray = document.getElementsByClassName('input-hook')
        Array.from(likeArray, input => input.blur())
      }
    }, false)
  }
}
</script>

<style scoped>
.submit {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: #000;
  color: #fff;
}
.username {
  width: 200px;
  height: 50px;
  border: 1px solid #000;
  outline: none;
}
</style>

主要代码是在表单加上一个类名input-hook，在mounted监听事件。

    const el = document.documentElement || document.body
    const originHeight = el.clientHeight
    window.addEventListener('resize', () => {
      const resizeHeight = el.clientHeight
      if (resizeHeight < originHeight) {
        console.log('键盘弹起')
      } else {
        console.log('键盘收起')
        const likeArray = document.getElementsByClassName('input-hook')
        Array.from(likeArray, input => input.blur())
      }
    }, false)