fastclick use fastclick ios11.3 bug-related reasons (ios click the input box becomes insensitive, after ios input out of focus, move the page, click not)

FastClick

Browser on your mobile device by default will trigger a click event when the user clicks on the screen about 300 ms delay, which is to check whether the user is doing double-click. To be able to immediately respond to the user's click event, there will be a FastClick.

Installation fastclick can use npm, Component and Bower. There is also provided a Ruby version of GEM  Fastclick-Rails and .NET provides NuGet Package Penalty for .

npm install fastclick

　import   FastClick   from ' fastclick';

 

　Vue.use(FastClick);

 

　// In main.js introduced, and bound to the body.

import FastClick from 'fastclick'

FastClick.attach(document.body);

 After the recent discovery of upgrading to ios11.3, click the input box becomes insensitive, the second click page input box will require a long press to function properly evoke keyboard input.

 

solution

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 soft keyboard page will not shut down after the rebound (after solving the IOS input out of focus, page move, can not click on the question)
Solution:

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 out of focus events @ blur = "InputBlur"

　　InputBlur: function(value){

　　　　 window.scroll(0, 0);

　　}