function?copyToClipBoard(id){
創(chuàng)新互聯(lián)建站自成立以來(lái),一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站制作、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開(kāi)發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷(xiāo)服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開(kāi)發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開(kāi)發(fā)工程師團(tuán)隊(duì)及專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。
$("#"+id).text().clone();
alert("復(fù)制成功!");
}
html部分
!DOCTYPE?html
html
head
titleZeroClipboard?Test/title
meta?charset="utf-8"
script?type="text/javascript"?src="clipboard.min.js"/script
script?type="text/javascript"?src="jquery-1.10.2.min.js"/script
/head
body
input?id="t"?type="text"/數(shù)據(jù)輸出測(cè)試br
textarea?id="t2"/textareabr
!--測(cè)試1--
!--button按鈕測(cè)試,需要復(fù)制的值放在屬性??data-clipboard-text中br--
button?class="btn"?data-clipboard-text="測(cè)試1"點(diǎn)擊測(cè)試1/buttonbrbr
!--測(cè)試2--
!--a按鈕測(cè)試,需要復(fù)制的值放在屬性?data-clipboard-text中br--
a?class="a"?data-clipboard-text="測(cè)試2"點(diǎn)擊測(cè)試2/abrbr
!--測(cè)試3--
!--測(cè)試,通過(guò)按鈕的data-clipboard-target屬性獲取指定標(biāo)簽中的值--
div測(cè)試3/div
button?class="btn2"?data-clipboard-action="copy"?data-clipboard-target="div"點(diǎn)擊測(cè)試3/buttonbrbr
!--測(cè)試4--
!--測(cè)試,通過(guò)按鈕的data-clipboard-target屬性獲取指id的標(biāo)簽中的值中?--
button?class="btn3"?data-clipboard-action="copy"?data-clipboard-target="#t2"點(diǎn)擊測(cè)試4/button
/body
/html
jquery部分:
!--測(cè)試1--
$(document).ready(function(){??
var?clipboard?=?new?Clipboard('.btn');?
clipboard.on('success',?function(e)?{
console.log(e);
alert("測(cè)試1復(fù)制成功!")
});
clipboard.on('error',?function(e)?{
console.log(e);
alert("測(cè)試1復(fù)制失敗!請(qǐng)手動(dòng)復(fù)制")
});
})
!--測(cè)試2--
$(document).ready(function(){??
var?clipboard1?=?new?Clipboard('.a');?
clipboard1.on('success',?function(e)?{
console.log(e);
alert("測(cè)試2復(fù)制成功!")
});
clipboard1.on('error',?function(e)?{
console.log(e);
alert("測(cè)試2復(fù)制失??!請(qǐng)手動(dòng)復(fù)制")
});
})
!--測(cè)試3--
$(document).ready(function(){??
var?clipboard2?=?new?Clipboard('.btn2');?
clipboard2.on('success',?function(e)?{
console.log(e);
alert("測(cè)試3復(fù)制成功!")
});
clipboard2.on('error',?function(e)?{
console.log(e);
alert("測(cè)試3復(fù)制失??!請(qǐng)手動(dòng)復(fù)制")
});
})
!--測(cè)試4--
$(document).ready(function(){??
var?clipboard3?=?new?Clipboard('.btn3');?
clipboard3.on('success',?function(e)?{
console.log(e);
alert("測(cè)試4復(fù)制成功!")
});
clipboard3.on('error',?function(e)?{
console.log(e);
alert("測(cè)試4復(fù)制失?。≌?qǐng)手動(dòng)復(fù)制")
});
})
注:此方法主要使用了clipboard,無(wú)需通過(guò)其他文件,引入一個(gè)clipboard.js文件即可使用,簡(jiǎn)單方便
clipboard.js庫(kù)文件下載地址
如果你是想鼠標(biāo)選中后點(diǎn)擊復(fù)制到文本框內(nèi),其實(shí)不用剪貼板,可以獲取選中的內(nèi)容,然后在復(fù)制給文本框就可以了
出于安全問(wèn)題,無(wú)法使用原生的 JS 或 jQuery 來(lái)操作粘貼板。除非使用瀏覽器擴(kuò)展(需設(shè)置權(quán)限),或者使用Flash。
某些瀏覽器允許在文本框內(nèi)使用 document.execCommand('copy') 與 document.execCommand('paste') 來(lái)操作剪貼板。
(但現(xiàn)在基于較新版本的webkit內(nèi)核以及主流的瀏覽器,該命令已經(jīng)被False)
1. 單用js 實(shí)現(xiàn)復(fù)制功能, 僅僅只能對(duì)ie起作用; 其他安全性高的游覽器是不行的,如 firfox, chrome 等。
2. 遇到這個(gè)功能一般做法是: 用js判斷是不是ie, 如是,復(fù)制,如不是,自動(dòng)選中文字,提示讓他自己手工復(fù)制。騰訊公司的網(wǎng)站就是這樣的做法。
3. flash可以做到通用, 但是不推薦,原因是flash 有可能用戶(hù)游覽器不支持或根本沒(méi)安裝