ios 手机上input、textarea聚焦不灵敏

问题： ios 手机上input、textarea聚焦不灵敏需要多次点击才聚焦弹出软键盘

以textarea为例阐述解决方法

html

<div class="askleave-cont">
  <p class="title">留言内容</p>
  <p ref="askleave-body" @click="handleTextarea()" class="askleave-body">
    <textarea id="formText" v-model="askleaveInfo.body" @focus="handleFocus()" @blur="handleBlur()" ref="textarea" maxlength="120"></textarea>
    <span @click="handleTextarea()" v-show="isText" class="placeholder">请输入4-120字的留言内容，如：小朋友今天身体不适，需要请假1天，希望老师知晓</span>
  </p>
</div>

css

 .askleave-cont {
    width:100%;
    background:#fff;
    padding: 0.34rem 0.3rem 0;
    box-sizing:border-box;
  }
  .main .title{
    width:100%;
    height:0.32rem;
    line-height:0.32rem;
    font-size:0.28rem;
    color:#666;
    margin-bottom:0.18rem;
  }
  .askleave-body{
    width: 100%;
    position:relative;
    height:1.36rem;
    font-size:0;
  }
  .askleave-body textarea{
    width:100%;
    height:1.36rem;
    line-height:0.38rem;
    font-size:0.28rem;
    color:#333;
    position: absolute;
    top: 0;
    left: 0;
    cursor:pointer;
    /*去除默认样式*/
    outline: none;
    resize: none;
    border: none;
    padding:0px!important;
  }
  .askleave-body .placeholder{
    display:block;
    width: 100%;
    line-height:0.38rem;
    color: #c1c1c1;
    font-size: 0.28rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    cursor:pointer;
  }

js

let observe
if (window.attachEvent) {
  observe = function (element, event, handler) {
    element.attachEvent('on' + event, handler)
  }
} else {
  observe = function (element, event, handler) {
    element.addEventListener(event, handler, false)
  }
}
export default {
  mounted () {
  // textarea 高度动态增加
    this.initWatchTextarea()
  },
  data () {
    return {
      askleaveInfo: {
        pm_type_id: 0,
        body: '',
        started_at: '',
        ended_at: '',
        reviewers: []
      },
      isText: true,
    }
  },
  methods: {
    handleTextarea () {
      this.$refs.textarea.focus()
      this.isText = false
    },
    handleFocus () {
      let text = document.getElementById('formText')
      let bodyEle = this.$refs['askleave-body']
      let height = text.scrollHeight + 'px'
      this.isText = false
      if (this.isIOS) {
        bodyEle.style = `height:${height};`
        this.$refs.textarea.style = `left:-3px;width:calc(100vw - 0.54rem);height:${height};`
      }
    },
    handleBlur () {
      let text = document.getElementById('formText')
      let height = text.scrollHeight + 'px'
      if (this.askleaveInfo.body.length <= 0) {
        this.isText = true
        if (this.isIOS) {
          this.$refs.textarea.style = ''
        }
      }
      if (this.askleaveInfo.body.length > 0 && this.askleaveInfo.body.length < 4) {
        this.$utils.showMessage('留言内容至少输入4个字')
      }
      if (this.isIOS) {
        window.scroll(0, 0)
      }
    },
    initWatchTextarea () {
      let self = this
      let text = document.getElementById('formText')
      let bodyEle = this.$refs['askleave-body']
      function resize () {
        text.style.height = '1.36rem'
        if (self.handleAreaHeight) {
          text.style.height = text.scrollHeight + 'px'
          bodyEle.style.height = text.scrollHeight + 'px'
        } else {
          setTimeout(() => {
            text.style.height = text.scrollHeight + 'px'
            bodyEle.style.height = text.scrollHeight + 'px'
            self.handleAreaHeight = true
          }, 500)
        }
      }
      /* 0-timeout to get the already changed text */
      function delayedResize () {
        window.setTimeout(resize, 0)
      }
      observe(text, 'change', delayedResize)
      observe(text, 'cut', delayedResize)
      observe(text, 'paste', delayedResize)
      observe(text, 'drop', delayedResize)
      observe(text, 'keydown', delayedResize)

      // text.focus() // 当进入页面就聚焦时有用
      // text.select() /// 当进入页面就聚焦时有用
      resize()
    }
  }
}

解决问题的依据：

1、对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer可以解决
2、增加热区 点击textarea的父级元素p标签和包裹placeholder的span标签使 textarea聚焦

查到的方法还有（没用到）
最近做搜索框时发现，ios点击输入框之后，点击软键盘上的 完成 时发现，轻击input就无法唤起软键盘，无法对输入框聚焦，必须长按或重压才行，这边经过测试，发现应该是fastclick.js 引起的冲突，ios11 后修复了移动点击300ms延迟，so

提供两种方法：

1
vue的子应用中出现在ios上点击输入框不灵敏，需点两次才能获取焦点的问题解决方法如下：在node_module里找到fastClick文件，然后找到focus方法，加一句focus方法即可解决（如图）

image.png

2 在main.js下

const str= navigator.userAgent.toLowerCase()
const ver=str.match(/cpu iphone os (.*?) like mac os/)
 
if(!ver){ //非IOS系统
  // 引入fastclick 做相关处理
}
else {
  if(parseInt(ver[1])< 11){
   // 引入fastclick 做相关处理
  }
}

原文：https://blog.csdn.net/shentibeitaokong/article/details/86231818