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

fastclick作用

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

问题:

在移动端,用了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.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值