已解决：fastclick插件在Vue移动端IOS系统上点击input需要双击或长按才有效

做Vue项目的登录注册页面测试时发现的问题，Chrome浏览器上使用三星手机Glaxy S5测试input是没有问题的，换成了iPhone 6/7/8 Plus就出现了input需要双击或长按才有效的问题

尝试了好久，虽然使用touchstart也可以达到效果，但还是感觉不对劲，就去看了一下fastclick作者的github文档中有没有解决方案

滑到下面，居然让我找到了点击失焦的栗子 hhhhhh

不过在找到的/test例子中大概是这样解决的

不知道是不是找错了例子（自己没有尝试），找到了fastclick.js源代码

试着修改了一下获取焦点原型方法行不行

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.setSelectionRange(length, length);} else {targetElement.focus();}// 新增一行：都获取焦点targetElement.focus();};

测试了一下，终于解决了

简化一下解决方法：

if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {length = targetElement.value.length;targetElement.setSelectionRange(length, length);}// 新增一行：都获取焦点targetElement.focus();

演示解决方法GIF如下：

------------------------------------- 我是分割线 ---------------------------
好吧，最近又尝试了一下，fastclick可以使用，只是我引用的位置错了。。。
在app.vue中引用：

// 防止移动端点击没用
import fastclick from "fastclick";//vue挂载时使用即可
mounted() {//解决移动端点击300ms延时fastclick.attach(document.body);}

已解决：fastclick插件在IOS系统上点击input需要双击或长按才有效相关推荐

微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题参考文章: (1)微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 (2)https://www.cnblogs.com/co ...
微信小程序iOS系统上echarts不能滑动的问题
在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显.作为一个微信小程序的新手开发,这个问题属实难倒我了. ...
ios滚动条影响父页面 vue_在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrollin ...
解决中64位Win7系统上PLSQL无法连接ORACLE的方法(PLSQL无法识别ORACLE_HOME的配置)
解决中64位Win7系统上PLSQL无法连接ORACLE的方法(PLSQL无法识别ORACLE_HOME的配置) 参考文章: (1)解决中64位Win7系统上PLSQL无法连接ORACLE的方法(PL ...
已解决windows开机时，系统提示此windows副本不是正版
已解决windows开机时,系统提示此windows副本不是正版文章目录报错问题解决方法 PS 报错问题之前在工作中遇到过这个坑,记录一下问题以及解决方法,不一定针对所有情况都能用,但是可以供 ...
iOS系统上HEIC格式的图片如何转换成JPG格式的
iOS系统上HEIC格式的图片如何转换成JPG格式的?想必很多人都有这个烦恼吧.那么怎么进行转换呢? iOS11和以后的系统为了更好地保护苹果用户的隐私,于是就将手机用户拍摄下来的图片,保存为IOS系 ...
完美解决微信js-sdk在IOS系统报invalid signature的问题
完美解决微信js-sdk在IOS系统报invalid signature的问题作者原创,转载注明出处一.解决方案先说结论再说过程: (一)npm i jweixin-1.6.0 .系本人优化封装 ...
已解决python selenium模块自动化操作谷歌浏览器点击元素失效问题解决（亲测有效）
已解决python selenium模块自动化操作浏览器点击元素,抛出异常selenium.common.exceptions.ElementClickInterceptedException: Me ...
html页面滑动不流畅,解决页面使用overflow:scroll在移动端iOS系统上滑动出现卡顿的问题...
对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题. 通过一个早上的爬虫搜索和与前端开发 ...

已解决：fastclick插件在IOS系统上点击input需要双击或长按才有效

已解决：fastclick插件在Vue移动端IOS系统上点击input需要双击或长按才有效

演示解决方法GIF如下：

已解决：fastclick插件在IOS系统上点击input需要双击或长按才有效相关推荐

最新文章

热门文章