[JS] IE/FF/Chrome瀏覽器的複製到剪貼板功能

現在才知道 Safari 和 Chrome 無法透過javascript access clipboard., FireFox/IE 瀏覽器的語法:

function SetCopy()
{
var text = "hahaha\r\nbcd";
if (!CopyToClipboard(text)) {
return;
}
alert("已經把購買資訊複製到系統剪貼簿，您可以使用（Ctrl+V 或滑鼠右鍵）貼在留言欄位內。");
}

function CopyToClipboard(text) {
if (window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", text);
} else if (navigator.userAgent.indexOf("Opera") != -1) {
window.location = text;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被瀏覽器拒絕！\n請在瀏覽器地址欄輸入'about:config'並按上一頁\n然後將'signed.applets.codebase_principal_support'設置為'true'");
return false;
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return false;
27: var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return false;
trans.addDataFlavor('text/unicode');
32: var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = text;
str.data = copytext;
trans.setTransferData("text/unicode", str, copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
44: return true;
}

若字串中有斷行，要使用「\r\n」。


要讓 chrome/safari 可以用的話, 只能透再包一層 flash 上去, 參考看看這2篇的作法:

• 某貓痴的電腦學習筆記本
  http://it.nekounya.com/javascript-ie-firefox-compatible-copy-to-clipboard.html
• http://www.rahulsingla.com/blog/2010/03/extjs-copy-gridpanel-content-to-clipboard

 js 部分
<script type="text/javascript">
  var clipboardswfdata;
  var setcopy_gettext = function(){
    clipboardswfdata = document.getElementById('test_text').value;
    window.document.clipboardswf.SetVariable('str', clipboardswfdata);
  }
  var floatwin = function(){
    alert('複製成功！');
  }
</script>
這裡只寫到 Copy, 但沒有 demo past.

以下是 HTML 部分
<textarea id="test_text" rows="15" cols="100">文本內容</textarea>
<div id="clipboard_content">
  <div class="my_clip_button">
<span class="clipinner" id="clipinner">複製代碼到剪貼簿
    name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./_clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100">

    </span>
  </div>
</div>

因為是用隱藏的 swf 覆蓋在 button 上面實現的
div id 和 span id 都不可改, swf 從 某貓痴的電腦學習筆記本 下載: http://it.nekounya.com/_php/catchbook/_clipboard.swf

=======================

改用 ZeroClipboard.swf 和 jquery.zclip.js 也很常見, 畢盡 desktop 的 browser 幾乎都支援 flash.