原生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;
},

 

完结~~~~~~~~~~~~~~~~