解决 Vue 项目的文本框在 IOS 上点击无法输入/点击无效 需要长按或者点击多次

  • Z时代
  • 2024-01-10
  • 分类：IT

近期开发的一个项目测试人员发现，在 IOS 上的文本框总是点击无法获取焦点，多次点击或者长按才能获取焦点，导致这个问题所在的原因是因为项目中引入了 FastClick 这个是解决移动端延迟 300 毫秒的优化。

解决 Vue 项目的文本框在 IOS 上点击无法输入/点击无效 需要长按或者点击多次

当使用 FastClick 时，输入框在 IOS 上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为 FastClick 的点击穿透。解决方法如下：

FastClick.prototype.focus = function (targetElement) {
  let length;
  if (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();
  }
};

以上代码直接复制到引入 FastClick 的页面即可。

以上是 解决 Vue 项目的文本框在 IOS 上点击无法输入/点击无效 需要长按或者点击多次 的全部内容， 来源链接： utcz.com/p/232220.html

回到顶部