IE 是第一個支持剪貼板相關(guān)事件及通過 JavaScript 訪問剪貼板數(shù)據(jù)的瀏覽器。IE 的實現(xiàn)成為了事實 標(biāo)準(zhǔn)，這是因為 Safari、Chrome、Opera 和 Firefox 都實現(xiàn)了相同的事件和剪貼板訪問機制，后來 HTML5 也增加了剪貼板事件 。
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團隊，負(fù)責(zé)網(wǎng)站視覺設(shè)計、用戶體驗優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、網(wǎng)站設(shè)計、成都網(wǎng)站制作易于使用并且具有良好的響應(yīng)性。
(1) beforecopy:復(fù)制操作發(fā)生前觸發(fā)。
(2) copy:復(fù)制操作發(fā)生時觸發(fā)。
(3) beforecut:剪切操作發(fā)生前觸發(fā)。
(4) cut:剪切操作發(fā)生時觸發(fā)。
(5) beforepaste:粘貼操作發(fā)生前觸發(fā)。
(6) paste:粘貼操作發(fā)生時觸發(fā)。
這是一個比較新的控制剪貼板訪問的標(biāo)準(zhǔn)，事件的行為及相關(guān)對象會因瀏覽器而異。在 Safari、 Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜 單(預(yù)期會發(fā)生剪貼板事件)時觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會在 copy、cut 和 paste 事 件之前觸發(fā)。無論是在上下文菜單中做出選擇還是使用鍵盤快捷鍵，copy、cut 和 paste 事件在所有 瀏覽器中都會按預(yù)期觸發(fā)。
通過 beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據(jù)前修改 數(shù)據(jù)。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut 和 paste 事件。
剪貼板上的數(shù)據(jù)可以通過 window 對象(IE)或 event 對象(Firefox、Safari 和 Chrome)上的 clipboardData 對象來獲取。在 Firefox、Safari 和 Chrome 中，為防止未經(jīng)授權(quán)訪問剪貼板，只能在剪 貼板事件期間訪問 clipboardData 對象;IE 則在任何時候都會暴露 clipboardData 對象。為了跨瀏 覽器兼容，最好只在剪貼板事件期間使用這個對象。
clipboardData 對象上有 3 個方法:getData()、setData()和 clearData()，其中 getData() 方法從剪貼板檢索字符串?dāng)?shù)據(jù)，并接收一個參數(shù)，該參數(shù)是要檢索的數(shù)據(jù)的格式。IE 為此規(guī)定了兩個選 項:"text"和"URL"。Firefox、Safari 和 Chrome 則期待 MIME 類型，不過會將"text"視為等價于 "text/plain"。
setData()方法也類似，其第一個參數(shù)用于指定數(shù)據(jù)類型，第二個參數(shù)是要放到剪貼板上的文本。 同樣，IE 支持"text"和"URL"，Safari 和 Chrome 則期待 MIME 類型。不過，與 getData()不同的是， Safari 和 Chrome 不認(rèn)可"text"類型。只有在 IE8 及更早版本中調(diào)用 setData()才有效，其他瀏覽器會 忽略對這個方法的調(diào)用。
這里的 getClipboardText()函數(shù)相對簡單，它只需要知道 clipboardData 對象在哪里，然后 便可以通過"text"類型調(diào)用 getData()。相應(yīng)的，setClipboardText()函數(shù)則要復(fù)雜一些。在確定 clipboardData 對象的位置之后，需要根據(jù)實現(xiàn)以相應(yīng)的類型(Firefox、Safari 和 Chrome 是 "text/plain"，而 IE 是"text")調(diào)用 setData()。
如果文本框期待某些字符或某種格式的文本，那么從剪貼板中讀取文本是有幫助的。比如，如果文 本框只允許輸入數(shù)字，那么就必須檢查粘貼過來的值，確保其中只包含數(shù)字。在 paste 事件中，可以 確定剪貼板上的文本是否無效，如果無效就取消默認(rèn)行為，如下面的例子所示:
這個 onpaste 事件處理程序確保只有數(shù)字才能粘貼到文本框中。如果剪貼板中的值不符合指定模 式，則取消粘貼操作。Firefox、Safari 和 Chrome 只允許在 onpaste 事件處理程序中訪問 getData() 方法。
因為不是所有瀏覽器都支持剪貼板訪問，所以有時候更容易屏蔽一個或多個剪貼板操作。在支持 copy、cut 和 paste 事件的瀏覽器(IE、Safari、Chrome 和 Firefox)中，很容易阻止事件的默認(rèn)行為。 在 Opera 中，則需要屏蔽導(dǎo)致相應(yīng)事件的按鍵，同時阻止顯示相應(yīng)的上下文菜單。
通知復(fù)制兩個的沒了解過，可以給你看下復(fù)制一個的
js部分
window.onload=function(){
var??oIpt?=?document.getElementsByTagName('input')
var??oTta?=?document.getElementsByTagName('textarea')
oIpt[0].onclick=function(){
oTta[0].select()
document.execCommand("Copy");?
}
}
html部分
div??
textarea螢火蟲/textarea?
/div
input?type="button"?value="復(fù)制"?name=""
本篇文章不考慮瀏覽器兼容，谷歌瀏覽器親測至少得88版本往上。Mac系統(tǒng)復(fù)制粘貼html數(shù)據(jù)，會自動加一些標(biāo)簽，小伙伴們自己測吧。一般需求用不著。
想要實現(xiàn)復(fù)制粘貼就只需要搞明白兩件事就可以了。
第一就是如何往粘貼板里邊存放數(shù)據(jù)，第二就是如何讀取粘貼板里邊的數(shù)據(jù)。
所操作的數(shù)據(jù)大致可以分為三類數(shù)據(jù) 1：字符串 2：帶樣式的HTML 3：圖片 還有其他數(shù)據(jù)格式，還請各位小伙伴補充指教吧。
① 如果只是放普通字符串是最簡單的
② 想要放入帶格式的數(shù)據(jù)，比如想要往word內(nèi)粘貼一個表格，跟正常寫html標(biāo)簽加寫樣式是一樣的
③往粘貼板內(nèi)放入圖片,目前只支持放png圖片
其實也可以用放HTML的方式，把圖片放入粘貼板內(nèi)
可以使用clipboard插件解決這個問題。
github里直接搜索clipboard就可以找到了。
該插件并不依賴jquery。直接引入即可使用。
使用方法：
input?id="foo"?value="被復(fù)制的內(nèi)容"
button?class="btn"?data-clipboard-target="#foo"點擊復(fù)制/button
new?Clipboard('.btn');
這里的.btn是元素的class屬性，可以使用任意id或者class以及元素節(jié)點名稱來實例化插件。
默認(rèn)會為元素綁定click事件，點擊的時候會觸發(fā)。
data-clipboard-target參數(shù)指定被復(fù)制內(nèi)容的元素。
如上例，點擊按鈕后會將input的值“被復(fù)制的內(nèi)容”幾個字復(fù)制到剪切板中。
更多使用方法可以自行g(shù)ithub查詢。
主要是用到了 window.clipboardData.setData("Text",copyText);
他主要有兩個參數(shù)：第一個是設(shè)置要復(fù)制的是一段文本，第二個參數(shù)是要復(fù)制具體的內(nèi)容，這個內(nèi)容可以從文本框中或使用innerHTML獲取。
簡單的實例代碼：
復(fù)制代碼 代碼如下:
script type="text/javascript"
function copyData() {
var copyText = document.getElementById("ctl00_cpRight_txtUrl").value;
window.clipboardData.setData("Text",copyText);
}
/script
asp:TextBox ID="txtUrl" runat="server" Height="30px" Width="349px"/asp:TextBox
input id="btnCopyUrl" type="button" value="復(fù)制URL到粘貼板" onclick="copyData()" /
注：ctl00_cpRight_txtUrl這個ID其實是txtUrl生成頁面后自動生成的ID。
1、最基本的復(fù)制
Java代碼
script language="JavaScript"
function readTxt()
{
alert(window.clipboardData.getData("text"));
}
function setTxt()
{
var t=document.getElementById("txt");
t.select();
window.clipboardData.setData('text',t.createTextRange().text);
}
/script
input name="txt" value="測試"
input type="button" value="復(fù)制" onclick="setTxt()"
input type="button" value="讀取" onclick="readTxt()"
2、擴展復(fù)制：復(fù)制表格
Java代碼
INPUT TYPE="button" value="選中測試表格" onclick="CopyTable()"
測試
TABLE border="1" id="oTable"
TR
TD測試表格/TD
TD測試表格/TD
/TR
TR
TD測試表格/TD
TD測試表格/TD
/TR
/TABLE文字
SCRIPT LANGUAGE="JavaScript"
!--
function CopyTable()
{
var txt = document.body.createTextRange();
txt.moveToElementText(document.getElementById('oTable'));
txt.select();
}
//--
/SCRIPT
、兼容IE，firefox等瀏覽器的復(fù)制
Java代碼
script
function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
} else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被瀏覽器拒絕！\n請在瀏覽器地址欄輸入'about:config'并回車\n然后將'signed.applets.codebase_principal_support'設(shè)置為'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);
}
}
/script
button onclick="copyToClipboard('你好！');"復(fù)制文本“你好！”/button
textarea id="test"/textarea
重慶分公司
重慶分公司
