沒有廢話魄幕。。颖杏。纯陨。。。翼抠。咙轩。。阴颖。活喊。。量愧。钾菊。。偎肃。煞烫。。累颂。滞详。。喘落。茵宪。我只是搬運(yùn)+微封裝工。
原生來寫瀏覽器復(fù)制功能也不是不可以瘦棋。但是~~~本著高效稀火,穩(wěn)健的心態(tài),還是決定用ZeroClipboard赌朋。
簡介
這是一款基于Flash的凰狞,兼容性較強(qiáng)的用于剪貼板復(fù)制的 JS 插件,它是基于 Flash 來實(shí)現(xiàn)跨瀏覽器的復(fù)制功能的沛慢。
github:https://github.com/zeroclipboard/zeroclipboard
使用
你需要兩個文件赡若,因?yàn)槭腔贔lash的,所以肯定需要一個.swf文件团甲。
兩種方式:
1.直接使用官方的CDN逾冬,可以直接使用
2.如果在本地服務(wù)器上使用,請放在同一目錄下躺苦, ZeroClipboard.js 會自動加載 ZeroClipboard.swf
文件身腻。省去配置swf文件的路徑的步驟。
創(chuàng)建兩個input元素(不一定非是input)
<input id="clipText" type="text" />
<input id="clip" type="button" data-clipboard-target="clipText" value="一鍵復(fù)制" />
實(shí)例化zeroClipboard對象
<script type="text/javascript">
window.onload=function(){
var copy = new ZeroClipboard(document.getElementById("clip"));
}
</script>
就這樣你就可以實(shí)現(xiàn)一鍵復(fù)制功能啦匹厘,so easy`痔恕!愈诚!
事件綁定
ZeroClicpboard事件綁定函數(shù)on她按,用法與jq十分類似牛隅。
<script type="text/javascript">
window.onload=function(){
var copy = new ZeroClipboard(document.getElementById("clip"));
ZeroClipboard.on("error",function(){
alert('一鍵復(fù)制功能未正常加載。請檢查瀏覽器Flash');
})
ZeroClipboard.on("copy",function(){
alert('復(fù)制成功');
})
}
</script>
這里我只用到了error和copy事件酌泰。還有ready媒佣,aftercopy..........看自己需要。
重要
由于 Flash 本地沙箱的安全限制宫莱,以下代碼如果是在本地HTML文件中被瀏覽器直接打開丈攒,將無法正常工作。