本來想這樣的內(nèi)容其實真不應(yīng)急記錄了,網(wǎng)上太多了,但是還真要用到的時候才發(fā)現(xiàn),也不都是這么好用。所以還是記錄一下。
這次使用的zeroclipboard這個工具來實現(xiàn),Git上的項目在這:
https://github.com/zeroclipboard/zeroclipboard
1.下載
把Git上的dist目錄copy到自己的目錄中,其實只需要ZeroClipboard.js就可以了。
2.demo.html
<html> <body> <script src="/js/zc/ZeroClipboard.js"></script> <textarea id="fe_text" cols="50" rows="3">Copy me!</textarea> <button id="copy-button" data-clipboard-target="fe_text" data-clipboard-text="Default clipboard text from attribute" title="Click to copy me.">Copy to Clipboard</button> <script type="text/javascript"> var client = new ZeroClipboard( document.getElementById("copy-button") ); client.on( "ready", function( readyEvent ) {} ); </script> </body> </html>
3.細節(jié)
3.1 js是有先后順序的
要先引用<script src="/js/zc/ZeroClipboard.js"></script>
3.2 控件使用
data-clipboard-target是目標控件,data-clipboard-text是默認內(nèi)容
3.3初始化
初始化要在控件之后,new ZeroClipboard參數(shù)是要使用的控件ID,然后啟用client.on
更多使用請參考作者項目。