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

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

发布于 2020-03-29 字数 1906 浏览 1635 评论 0

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

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

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

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

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

在 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();
  }
};

FastClick 消除点击延时提高程序的运行效率

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论