原生的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', 'Hello, world!');
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);
}那么来到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 (''),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