移动端触摸复制功能

今天药忘吃喽~ 2022-03-28 04:38 272阅读 0赞

公司项目之前一个需求，需要用户一进页面触摸手机后就自动帮他复制一个串码。。wtf? 还有这种操作？好吧，需求出来了，那就想实现吧。。。

用户进来触摸手机 会产生`touchstart, touchmove, touchend`三个事件，我们肯定不能直接写这三个事件去复制，这样会影响它的默认事件，我们还要做的神不知鬼不觉。。。

所以，在函数内部我们就需要用到下面代码

// part1
    
        var t = document.createElement('textarea');  // 先生成一个文本框
    
        t.id = "WpCopy";
    
        t.value="需要复制的东西";
    
        t.setAttribute('readOnly','readOnly');
        t.setAttribute('style',"font-size: 12pt; border: 0px; padding: 0px; margin: 0px; position: absolute; left: -9999px; top: 0px;");  //让他消失在视野范围内
    
        document.getElementsByTagName('body')[0].appendChild(t);  // 添加到页面中
    
        var WpCopy = document.getElementById('WpCopy');  // 显示的声明
        
        WpCopy.focus();  // 获取焦点

在这里我们创建一个隐藏的可以赋值的文本框，下一步我们就需要在事件中判断并且让这个文本框里的值跑到用户的粘贴板上了。。。

// part1
    
        // 声明一个事件函数
        function touch (event) {
            var event = event || window.event,
                  link = ' ';
            switch(event.type){
    
                case "touchstart":
    
                    link = event.target; //在触摸开始的时候把触摸对象赋值给之前声明的变量保存下来
                    
                    break;
    
                case "touchend":
    
                    WpCopy.setSelectionRange(0, WpCopy.value.length); // 触摸结束时候让文本框全选
                    document.execCommand('copy', true); // 并且复制到粘贴板
                    if(link != '') { 
                        link.click();  // 这一步判断如果用户是正常点击页面元素，继续让他执行
                    }
    
                    break;
    
                case "touchmove":
    
                    link = ""; // 如果用户是触屏移动则让变量为空，不会触发触摸开始元素的原有事件
    
                    break;
            }
        }

到这一步基本可以完成需求了，下面将这两段代码整合成一个函数方法，方便页面调用

function loadCopy (){
        $(document).on('touchstart',touch);
        $(document).on('touchmove',touch);
        $(document).on('touchend',touch);
    
        // 放入part1， part2;
    }
    
    // 在需要的页面调用loadCopy 即可

这么一个需求其实也就是`execCommand` 复制的应用。。。代码写得不好希望指出

原文地址：[https://www.cnblogs.com/mrzll/archive/2019/01/09/10244055.html][https_www.cnblogs.com_mrzll_archive_2019_01_09_10244055.html]

[https_www.cnblogs.com_mrzll_archive_2019_01_09_10244055.html]: https://www.cnblogs.com/mrzll/archive/2019/01/09/10244055.html