• 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;
    }
    
  • 相关阅读:
    Investment_完全背包
    Recaman's Sequence_递推
    MooFest_二维树状数组
    Mobile phones_二维树状数组
    Matrix_二维树状数组
    Get Many Persimmon Trees_枚举&&二维树状数组
    树状数组基础知识
    The Cow Lineup_找规律
    [SOJ] 简单哈希
    sscanf() 函数
  • 原文地址:https://www.cnblogs.com/ajaemp/p/11984487.html
Copyright © 2020-2023  润新知