原生Js實現複製功能的方法總結，execCommand和clipboardData的使用

原生Js實現複製(Copy)的兩種方法，一種是利用 clipboardData，另外一種則是用 execCommand()，今天將統一講解一下關於他們的使用方法。

 

document.execCommand

當一個HTML文檔切換到設計模式(designMode)時，文檔對象暴露 execCommand方法，該方法允許運行命令來操縱可編輯區域的內容。大多數命令影響文檔的選（粗體，斜體等），而其他命令插入新元素（添加鏈接）或影響整行（縮進）。當使用 contentEditable時，調用 execCommand() 將影響當前活動的可編輯元素。

兼容性：

特徵	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
複製copy	43	(Yes)	441	9	29	10

  

clipboardData

clipboardData對象 ,注意網頁裏剪貼板到現在只能設置Text類型，即只能複製文本 clearData("Text")清空粘貼板 getData("Text")讀取粘貼板的值 setData("Text",val)設置粘貼板的值 當複製的時候body的oncopy事件被觸發,直接return false就是禁止複製,注意是不能複製網頁裏的文本了。

（注意：主要用於支持IE，ie7，與ie8 對網頁有個複製的權限，需在“安全”中的“自定義級別”的腳本中設置）

 

代碼實現

html:

<span class="hleft" v-on:click="copyLink(data.url,'text')">複製鏈接</span>
<textarea id="text">{{data.url}}</textarea>

JS:

copyToClipBoard:function(s,id){ //複製到剪切板
	if(document.execCommand){
		var e=document.getElementById(id);
		e.select();
		document.execCommand("Copy");
		return true;
	}
	if(window.clipboardData){
        window.clipboardData.setData("Text", s);
        return true;
    }
	return false;
},

 

完結~~~~~~~~~~~~~~~~