Vue 移动端输入框在 IOS 上点击弹起软键盘不灵敏/有延迟/点击卡顿

Question

移动端开发都是使用的 Click 事件，为了消除移动端点击的 300ms 延迟，引入了fastclick.js 库，按照官方的使用方法：

// 消除 300MS 延迟
import FastClick from 'fastclick'
FastClick.attach(document.body)

但是在实际测试中，发现 在某些ios上，点击输入框想调起软键盘，触点不是很灵敏，必须重压或长按才能成功调起。网上找了一大圈，都说应该是 fastclick.js 引起的，不过 ios11 后修复了移动点击 300ms 延迟，修改方法如下：

在 node_module 里找到 fastClick 文件，然后找到 focus 方法，大概 325 行：

在 if 判断条件为 true 的语句内添加如下代码，如上图所示：

targetElement.focus();

完整的代码如下：

FastClick.prototype.focus = function(targetElement) {
  var length;
  // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
};

https://www.wenjiangs.com/article/fastclick.html