移動端觸摸復制功能

公司項目之前一個需求，需要用戶一進頁面觸摸手機后就自動幫他復制一個串碼。。wtf? 還有這種操作？好吧，需求出來了，那就想實現吧。。。

用戶進來觸摸手機 會產生touchstart, touchmove, touchend三個事件，我們肯定不能直接寫這三個事件去復制，這樣會影響它的默認事件，我們還要做的神不知鬼不覺。。。

所以，在函數內部我們就需要用到下面代碼

    // part1

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

    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();  // 獲取焦點

    // 或者不用生成input

    function copyToClipboard(s){
		   if (window.clipboardData){
		      	window.clipboardData.setData('text',s);
		   }else {
		      	document.oncopy = function(e){
		         	e.clipboardData.setData('text',s);
		         	e.preventDefault();
		         	document.oncopy = null;
		      }

		      document.execCommand('Copy');
		   }
		};
    // 調用方法即可

在這里我們創建一個隱藏的可以賦值的文本框，下一步我們就需要在事件中判斷並且讓這個文本框里的值跑到用戶的粘貼板上了。。。

    // 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.ontouchstart = touch;
		document.ontouchmove = touch;
		document.ontouchend = touch;
                var copyInput = document.createElement('input');  // 先生成一個文本框

		copyInput.id = "WpCopy";
		copyInput.value= value;  // value

		copyInput.setAttribute('readOnly','readOnly');
		copyInput.setAttribute('style',"font-size: 12pt; border: 0px; padding: 0px; margin: 0px; position: absolute; left: -9999px; top: 0px;");  //讓他消失在視野范圍內

		document.getElementsByTagName('body')[0].appendChild(copyInput);  // 添加到頁面中
		var WpCopy = document.getElementById('WpCopy')
	    
	    function touch (event) {
	        var event = event || window.event,
	              link = '';
	        switch(event.type){

	            case "touchstart":

	            	link = event.target; //在觸摸開始的時候把觸摸對象賦值給之前聲明的變量保存下來
	                
	                break;

	            case "touchend":
	            	WpCopy.focus();  // 獲取焦點
	                WpCopy.select(); // 觸摸結束時候讓文本框全選
	                WpCopy.setSelectionRange(0, WpCopy.value.length);
	                
	                document.execCommand('Copy'); // 並且復制到粘貼板

	                if(link != '') { 
	                    link.tap();  // 這一步判斷如果用戶是正常點擊頁面元素，繼續讓他執行
	                }

	                break;

	            case "touchmove":
	                link = ""; // 如果用戶是觸屏移動則讓變量為空，不會觸發觸摸開始元素的原有事件

	                break;
	        }
	    }
	};

	window.addEventListener('load', loadCopy('需要復制的內容'), false);

這么一個需求其實也就是execCommand 復制的應用。。。代碼寫得不好希望指出