fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios inpu

FastClick

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，就有了FastClick。

安装fastclick可以使用npm，Component和Bower。另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package。

npm install fastclick

　import   FastClick   from ‘ fastclick‘;   　Vue.use(FastClick);   　//在main.js中引入，并绑定到body。

import FastClick from ‘fastclick‘

FastClick.attach(document.body);

 最近发现升级到ios11.3之后，输入框点击变得不灵敏，第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。

 

解决方案

FastClick.js原文件的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‘) { // 通过 targetElement.setSelectionRange(length, length) 将光标的位置定位在内容的尾部（但注意，这时候还没触发focus事件） length = targetElement.value.length; targetElement.setSelectionRange(length, length);

        targetElement.focus();//强制元素focus，即在改写的focus响应函数中直接触发元素的focus事件

　　} else {
　　 targetElement.focus(); 
　　}
};

ios 软键盘关闭后 页面不会回弹(解决IOS中input失焦后，页面上移，点击不了问题)
解决方法：

var u = navigator.userAgent; var flag; var myFunction; var isIOS = !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/); if (isIOS) { document.body.addEventListener(‘focusin‘, () => { //软键盘弹起事件 flag = true; clearTimeout(myFunction); }) document.body.addEventListener(‘focusout‘, () => { //软键盘关闭事件 flag = false; if (!flag) { myFunction = setTimeout(function () { window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部) }, 200); } else { return } }) } else { return }

//input 失焦事件  @blur="InputBlur"

　　InputBlur: function(value){ 　　　　 window.scroll(0, 0); 　　}