fastclick插件中存在的bug

戏子无情 提交于 2019-12-06 12:41:58

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;
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!