ios 移动端输入框点击不灵敏 fastclick

Posted 2021-09-29 米虫

fastclick作用

用于消除物理敲击与click移动浏览器上的事件触发之间的300ms延迟。（https://www.npmjs.com/package...）

问题：

在移动端，用了antd mobile的输入框组件，但是ios用户都反馈输入框点击不灵敏，有时候要点好几下才能点中输入框。

原因：

1.可能是样式上输入框被遮住了。
2.设备点击问题

尝试：

1.针对第一种可能，我在样式上给输入框加了z-index，还有宽高，但是问题还是有，所以排除第一种可能。

2.第二种可能是基于我用了fastclick解决点击问题。

解决方法

·1：在fastclick的源码中增加。若你npm下载了fastclick，那就去node_modules中的fastclick包中找到FastClick.prototype.focus。

FastClick.prototype.focus = function(targetElement) {
 var length;
 if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf(\'date\') !== 0 && targetElement.type !== \'time\' && targetElement.type !== \'month\' && targetElement.type !== \'email\') {
     length = targetElement.value.length;
     targetElement.focus();//加入这一句话就OK了
     targetElement.setSelectionRange(length, length);
 } else {
     targetElement.focus();
 }
};
 

然后每次打包的时候注意一下这个包有没有这一句。（因为我没试过这种，试过效果的朋友跟我说一下哈）

·2：不是通过npm包管理工具下载的，而是页面引入的，那就需要下载fastclick的包，然后在包里面像上一种方式一样增加一句代码（targetElement.focus()）。如果项目里面有处理文件路径的那随便放fastclick包，然后改一下public/index.html的引入;如果没有文件路径处理，那fastclick在public/index.html的引入，就可能引起打包时的路径查找问题，所以我直接把fastclick的包放在public下，这样dist里面也会新增一个fastclick.