其他分享
首页 > 其他分享> > fastclick插件中存在的bug

fastclick插件中存在的bug

作者:互联网

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

npm install --save fastclick

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

import  FastClick  from  'fastclick'

FastClick.attach(document.body);

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

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();
    }
}
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;
}

标签:body,插件,fastclick,length,targetElement,&&,var,bug
来源: https://www.cnblogs.com/ajaemp/p/11984487.html