IOS中div contenteditable=true無法輸入 fastclick.js在點擊一個可輸入的div時，ios無法正常喚起輸入法鍵盤

原文地址： https://blog.csdn.net/u010377383/article/details/79838562

前言
為了提升移動端click的響應速度，使用了fastclick.js這么一個庫。

這個庫導致這個可編輯的div被點擊無法輕松的喚起輸入法。
長按才能成功。div的一個contentEditable=”true”

解決方案
首先：再你的編輯器中增加一個class屬性。我用的是quilljs

<div id="editor" class="needsclick"></div>

然后我們去main.js(我是基於vue在做)重寫他原型上的needsClick方法（源碼在229行）

其實你也可以選擇fark插件修改，放在本地庫

import FastClick from 'fastclick'
// const $ = window.$
// 點擊延遲 因為和編輯器沖突, 重制起原型方法needsClick
const deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
const deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
FastClick.prototype.needsClick = function (target) {
  // 下面這句
  // 這是jq寫法
  // if ($(target).parents('.needsclick').length) return true
  while (target.tagName !== 'BODY') {
   // 放在本地插件庫, 請將includes換成indexOf判斷
    if (target.className.includes('needsclick')) return true
    target = target.parentNode
  }

  switch (target.nodeName.toLowerCase()) {
    // Don't send a synthetic click to disabled inputs (issue #62)
    case 'button':
    case 'select':
    case 'textarea':
      if (target.disabled) {
        return true
      }

      break
    case 'input':

      // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
      if ((deviceIsIOS && target.type === 'file') || target.disabled) {
        return true
      }

      break
    case 'label':
    case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
    case 'video':
      return true
  }

  return (/\bneedsclick\b/).test(target.className)
}
FastClick.attach(document.body)