移动端触摸复制功能

来源:07素材网 01月16日 12:28
公司项目之前一个需求,需要用户一进页面触摸手机后就自动帮他复制一个串码。。wtf? 还有这种操作?好吧,需求出来了,那就想实现吧。。。

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

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

    var t = document.createElement('textarea');  // 先生成一个文本框

    t.id = "WpCopy";

    t.value="需要复制的东西";  // 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();  // 获取焦点
在这里我们创建一个隐藏的可以赋值的文本框,下一步我们就需要在事件中判断并且让这个文本框里的值跑到用户的粘贴板上了。。。
    // part2

    // 声明一个事件函数
    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 (value){
    $(document).on('touchstart',touch);
    $(document).on('touchmove',touch);
    $(document).on('touchend',touch);

    // 放入part1, part2;
}
// 在需要的页面调用loadCopy 即可
这么一个需求其实也就是execCommand 复制的应用。。。代码写得不好希望指出
原文出处:https://www.cnblogs.com/mrzll/p/10244055.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

头条

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

《本打算在SQLite3数据库里执行一个查询语句,使用的是php语言,起初遇到的是权限问题: permission denied,因为SQLite3数据库文件和PHP执行者属于两个不同的用户,首先需要对这个文件执行mode 777的权限开放,然后,又遇到了下面这样的PHP错误