公司專案之前一個需求，需要使用者一進頁面觸控手機後就自動幫他複製一個串碼。。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