vue h5 ios点击屏幕不收起键盘

vue h5 ios点击屏幕不收起键盘

在安卓下，点击屏幕能够正常的收起键盘，但是在ios下，点击屏幕是不会收起键盘的，那么就需要手动让他收起键盘。

在网上查找一番后，看到一篇文章：https://www.cnblogs.com/binmengxue/p/5993166.html。受这篇文章的启发，我改良成vue版。

原理就是：

在ios下，键盘弹出，然后点击屏幕空白，键盘不会收起，其实就是input表单没有失去焦点，那么让他失去焦点，键盘自然会收起。

知道了原理后，就好办了，首先是只有ios下才会出现这个问题，那么就先判断ios环境：

const isIphone = navigator.userAgent.toUpperCase().includes('IPHONE')  // 判断ios环境

export default {}

然后就是监听手指触摸事件，一个重要的问题就是，点击的地方要除了input表单，才让它失去焦点。

放代码：

methods: {
     objBlurFun(sDom, time = 300) {
      if (isIphone) {  // 如果是ios环境下
        let obj = document.querySelector(sDom)   // 这里如果传入的是2个以上 需要用querySelectorAll() 同时
        this.objBlur(obj, time)                  //  需要遍历调用函数
      }
    },
     objBlur(sDom, time = 300) { 
      if (sDom) {
        sDom.addEventListener(
          'focus',
          () => {
            document.addEventListener('touchend', e => {   // 这里的e非常重要，用来判断是否是点击了input表单
              this.docTouchend(time, sDom, e)
            })
          },
          false
        )
      }
    },
	// 元素失去焦点隐藏ihpone的软键盘
    docTouchend(time, sDom, e) {
      if (e.target != sDom) {     // 如果点击的是 屏幕空白处的情况下
        console.log(sDom)
        console.log(e.target)
        setTimeout(() => {
          sDom.blur()      // 表单失去焦点  键盘就会自动收起
          document.removeEventListener('touchend', this.docTouchend, false)   // 收起之后 移除监听器
        }, time)
      } else {}
}，

mounted() {
     this.objBlurFun('input')  // input / textarea 都可以。
}