IE本身有提供了原生的支持:clipboardData
和 setData
。Firefox 等都没有,因此利用 flash 来做跨浏览器支持。
使用 ZeroClipboard
是目前最好的解决方式(需要在服务器上运行):
Zero Clipboard 利用透明的 Flash 让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。
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"); });