跨浏览器剪贴功能

IE本身有提供了原生的支持:clipboardDatasetData。Firefox 等都没有,因此利用 flash 来做跨浏览器支持。

使用 ZeroClipboard 是目前最好的解决方式(需要在服务器上运行):

Zero Clipboard的实现原理

Zero Clipboard 利用透明的 Flash 让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard Demo

Debug Console:

THML:
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>

// main.js
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
    moviePath: "/path/to/ZeroClipboard.swf"
});

clip.on( 'load', function(client) {
    // alert( "movie is loaded" );
});

clip.on( 'complete', function(client, args) {
    this.style.display = 'none'; // "this" is the element that was clicked
    alert("Copied text to clipboard: " + args.text );
});

clip.on( 'mouseover', function(client) {
    // alert("mouse over");
});

clip.on( 'mouseout', function(client) {
  // alert("mouse out");
});

clip.on( 'mousedown', function(client) {
    // alert("mouse down");
});

clip.on( 'mouseup', function(client) {
    // alert("mouse up");
});

问题及注意事项:

ZeroClipboard 项目官网 使用介绍