javascript操作剪貼板的簡單介紹

• 1、谷歌瀏覽器 怎麼用js複製東西到剪貼板
• 2、js 如何實現將div內的內容放到剪切板？
• 3、JavaScript如何點擊實現複製文字到剪切板
• 4、js將內容放到剪貼板怎麼寫呢？

代碼如下：

JS複製內容到剪貼板: 兼容IE、Firefox、Chrome、Safari所有瀏覽器

function copyToClipboard(txt) {

if(window.clipboardData)

{

window.clipboardData.clearData();

window.clipboardData.setData(“Text”,txt);

alert(“網址複製成功!快用Ctrl+V粘貼到QQ，MSN中發送給好友吧！”)

}

else if(navigator.userAgent.indexOf(“Opera”) != -1)

{

window.location = txt;

alert(“網址複製成功!快用Ctrl+V粘貼到QQ，MSN中發送給好友吧！”)

}

else if (window.netscape)

{

try {

netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);

}

catch (e)

{

alert(“被瀏覽器拒絕！\n請在瀏覽器地址欄輸入’about:config’並回車\n然後將’signed.applets.codebase_principal_support’設置為’true'”);

}

var clip = Components.classes[‘@mozilla.org/widget/clipboard;1’].createInstance(Components.interfaces.nsIClipboard);

if (!clip) return;

var trans = Components.classes[‘@mozilla.org/widget/transferable;1’].createInstance(Components.interfaces.nsITransferable);

if (!trans) return;

trans.addDataFlavor(‘text/unicode’);

var str = new Object();

var len = new Object();

var str = Components.classes[“@mozilla.org/supports-string;1”].createInstance(Components.interfaces.nsISupportsString);

var copytext = txt;

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);

alert(“網址複製成功!快用Ctrl+V粘貼到QQ，MSN中發送給好友吧！”)

}

}

copyToClipboard(‘ABCD’)

這些代碼都是一樣的，不存在原創與複製

定義如下JS函數，然後DIV觸發onclick 事件就OK。

function CopyUrl()

{

var htm = document.getElementById(“yourdiv”).innerHTML;

window.clipboardData.setData(‘text’, htm);

}

yourdiv 就是你的div的ID

可以使用clipboard插件解決這個問題。

github里直接搜索clipboard就可以找到了。

該插件並不依賴jquery。直接引入即可使用。

使用方法：

input id=”foo” value=”被複制的內容”

button class=”btn” data-clipboard-target=”#foo”點擊複製/button

new Clipboard(‘.btn’);

這裡的.btn是元素的class屬性，可以使用任意id或者class以及元素節點名稱來實例化插件。

默認會為元素綁定click事件，點擊的時候會觸發。

data-clipboard-target參數指定被複制內容的元素。

如上例，點擊按鈕後會將input的值「被複制的內容」幾個字複製到剪切板中。

更多使用方法可以自行github查詢。

input type=”text” id=”copyText” value=”” style=”color:#fff; background:#fff; border-color:#fff;border: 0; position:absolute; top:-50px; left:0;” /

script type=”text/jscript”

//複製文本

function copyText(str)

{

if(str.length 0)

{

$(“#copyText”).val(str);

//複製文本

var input = document.getElementById(“copyText”);

input.value = str; // 修改文本框的內容

input.select(); // 選中文本

document.execCommand(“copy”); // 執行瀏覽器複製命令

//layer提示框

layer.closeAll(‘msg’,{time:10000});

layer.msg(‘span style=”color:red;”已複製：/span/br’+str);

}

}

/script

a href=”jscript:copyText(‘要複製的內容’)”要複製的內容/a

這是代碼，這裡的文本框不能設置隱藏，否則複製失效，所以我設置的樣式讓它在瀏覽器之外的地方，無法被看到