移动端表单组件点击延迟问题解决办法

问题描述

vue 移动端开发中点击 input 输入框时，无法聚焦弹出键盘，有时需要多次点击才能弹出键盘，触发不灵敏

一开始以为是输入框的样式或输入框周围的样式影响，后面发现无关。之后怀疑是没有触发 focus 事件，又想到全局有引入 fastclick，查了一下得知是 fastclick 底层问题

FastClick 是一个简单易用的库，用于消除物理点击与 click 移动浏览器上的事件触发之间的 300ms 延迟。目的是使您的应用程序感觉更轻松，响应更快，同时避免对当前逻辑的任何干扰。

根据 Google 的说法是：从您点击按钮触发点击事件开始，移动浏览器将等待大约 300 毫秒。原因是浏览器正在等待查看您是否实际上正在执行双击。

解决步骤：

将原本的 main.js 中引入的 fastclick 依赖用 fastclick-hvue（类似的 npm 还有 fastclick-pro，fastclick-vue）依赖替换掉。导入的换成 fastclick-hvue 的。 如果 js 直接引用的可以直接修改 js 代码。

FastClick.prototype.focus = function (targetElement) {
  var length;
  //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
  //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf("date") !== 0 &&
    targetElement.type !== "time" &&
    targetElement.type !== "month" &&
    targetElement.type !== "email"
  ) {
    length = targetElement.value.length;
    targetElement.setSelectionRange(length, length);
    /*修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘*/
    targetElement.focus();
  } else {
    targetElement.focus();
  }
};