原生的js 复制接口 execCommand('copy')

第一个接口:原生的接口 

很遗憾,这个接口不能cross-browsers , 只能在ie上使用.不用担心,后面会介绍一个受到限制,但是兼容性在提高的接口 execCommand('copy')

document.addEventListener('copy', function(e){ e.clipboardData.setData('text/plain', 'Hello, world!'); e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard });

因为不兼容问题,所以一些大神想出了一个小tricks,但是仍然解决不了需求.

The clipboard manipulation is not cross-browser. For cross-browser solution you need flash

stackoverflow 大神的说法是

function copyToClipboard(text) { window.prompt("Copy to clipboard: Ctrl+C, Enter", text); } 弹出一个即时的弹框,但是我希望点击复制以后,就可以黏贴了,不要再手动复制一遍的时候,这个trick就没有办法了.

那么来到execCommand('copy');

随着兼容性的提高,execCommand的命令可以兼容

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari Basic support (Yes) (Yes)[1] ? ? (Yes) insertBrOnReturn 未实现 (Yes) 未实现 未实现 未实现 copy/cut 42 41 (41) 9 29 未实现

还有一个接口:document.execCommand('copy')

简要介绍:

execCommand  命令模式: 

优点: 发起者和实现者分离,可以很容易撤销,恢复和维护命令

发起者,实现者,多个任务.

我认为在execCommand接口.可以把用户看成开发者,浏览器看成实现者,命令参数看成多个封装的任务.从而使浏览器可以执行用户的很多命令.

任务的特点是: 封装得比较完善.

接口:

execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。

参数

aCommandName 一个  DOMString ，命令的名称。可用命令列表请参阅  命令 。 aShowDefaultUI 一个  Boolean 是否展示用户界面，一般为 false。Mozilla 没有实现。 .

如何使用?

使用一个不展示的input标签,来实现复制想要复制的内容.下面的是伪代码.

1.create a dom ('<input id='copyText'>'),domNode.value='copyContent' //创造一个domNode,并且将text内容放到节点上.

2.domNode 放到body里面,class{ display:absolute;left:-200px;bottom:-100px},让该节点不在可视区域内.为什么不用display:none?因为display none 会让这个节点不出现在body中.后面也没办法被选择....所以用定位的方式,让这个节点看不到,但是还在body里.

3.domNode.select();//让node被选中

4,try{

document.execCommand('copy');

destroy(domNode);//销毁节点

}catch(exception e){

}//当这个excCommand方法不被兼容时,会被捕捉到异常.

5. 可以黏贴了.(*^__^*) 嘻嘻……

参考文章:

官方api: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

stackoverflow 大神的见解http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript