Vue textarea 和input 开发ios点击空白地方键盘不收起问题

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

Vue textarea 和input 开发ios点击空白地方键盘不收起问题

1、创建一个index.js文件

//index.js

//解决ios点击屏幕空白出不收起键盘
export function objBlurFun (sDom, time = 100) {
  let isIphone = navigator.userAgent.toUpperCase().includes('IPHONE')  // 判断ios环境
  if (isIphone) {
    let obj = document.querySelector(sDom)  // 这里如果传入的是2个以上 需要用querySelectorAll() 同时
    objBlur(obj, time)                      // 需要遍历调用函数
  }
}
function objBlur (sDom, time = 300) {
  if (sDom) {
    sDom.addEventListener(
      'focus',
      () => {
        document.addEventListener('touchend', e => { // 这里的e非常重要，用来判断是否是点击了input表单
          docTouchend(time, sDom, e)
        })
      },
      false
    )
  }
}
// 元素失去焦点隐藏ihpone的软键盘
function 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)
  }
}
//键盘收起end

2、在需要使用的页面引入

import {  objBlurFun } from '@/utils/index';

<template>
    <div>
          <textarea
            style="width: 100%"
            cols="40"
            rows="5"
            :placeholder="请输入您的问题"
            minlength="100"
            v-model="memo"
            ref="form__input"
            id="textarea"
            @input="handleInput"
            @blur.prevent="blur()"
          >
          </textarea>
    </div>
</template>

data(){
    return{
        mome:""
    }
}

mounted(){
    objBlurFun('textarea') //解决textarea在ios上点击空白处键盘不收起问题
    objBlurFun('input') //解决input在ios上点击空白处键盘不收起问题
},
methods:{
    //输入文字高度自适应
     handleInput (e) {
      e.target.style.height = 'auto';
      e.target.style.height = e.target.scrollHeight + 'px';
      this.notNumbers = false
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },
    focus () {
      this.notNumbers = false
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },
    blur () {
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },
}

扩展 js https://www.cnblogs.com/binmengxue/p/5993166.html

//IOS处理点空白处不自动失去焦点的问题

objBlurFun("input");
    //如果不是当前触摸点不在input上,那么都失去焦点
    function objBlurFun(sDom,time){
        var time = time||300;
        //判断是否为苹果
        var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;
        if(isIPHONE){
           var obj = document.querySelectorAll(sDom);
           for(var i=0;i<obj.length;i++){
               objBlur(obj[i],time);
           }
        }
    }    
    // 元素失去焦点隐藏iphone的软键盘
    function objBlur(sdom,time){
         if(sdom){
            sdom.addEventListener("focus", function(){
                    document.addEventListener("touchend", docTouchend,false);
            },false);
                
         }else{
             throw new Error("objBlur()没有找到元素");
         }
         var docTouchend = function(event){
            if(event.target!= sdom){
                setTimeout(function(){
                     sdom.blur();
                    document.removeEventListener('touchend', docTouchend,false);
                },time);
            }
         };
        
    }