fastclick插件中存在的bug

1、在vue项目中安装fastclick插件

npm install --save fastclick

2、在main.js中引入并绑定到body

import  FastClick  from  'fastclick'

FastClick.attach(document.body);

3、在项目中安装fastclick成功后测试会遇到以下问题：

os input点击不灵敏
解决方法：vue项目中使用fastclick时ios input点击不灵敏

FastClick.prototype.focus = function(targetElement) {
    var length;
    var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
    var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
    //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError    
    //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
        length = targetElement.value.length;
        targetElement.setSelectionRange(length, length); //修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘    
        targetElement.focus();
    } else {
        targetElement.focus();
    }
}

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

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

来源：https://www.cnblogs.com/ajaemp/p/11984487.html

标签

fastclick

软键盘

var