javascript使用ZeroClipboard元件複製內容到剪下板
阿新 • • 發佈:2019-01-10
在做專案時有一個需求,是需要複製內容到剪下板,在去網上查詢之後,發現很多人發的程式碼或多或少都有一些小問題。
例如如下程式碼:
<script language="javascript">
function copy(){
window.clipboardData.setData('text',document.getElementById('text').value);
alert("複製成功!");
}
</script>
上面的程式碼是可以使用的,但是僅僅是在IE下使用的,那在Chrome下如何解決這個問題呢。
經過在網路的大量查詢,找到一個比較好的解決辦法,那就是使用ZeroClipboard.js和ZeroClipboard.swf。
下面就是使用它們所需要做的工作:
引入jquery.js和ZeroClipboard.js我們就不說了。
<script type="text/javascript"> // 設定SWF檔案的路徑 ZeroClipboard.setMoviePath("swf/ZeroClipboard.swf"); $(document).ready(function(){ $("button[id^=copy_]").each(function(){ // 建立ZeroClipboard物件 var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); var obj = $(this); var id = $(this).attr("id"); // 要複製的內容 var content = $(this).attr("copyContent"); clip.setText(content); clip.glue(id); //這個是複製成功後的提示 clip.addEventListener( "complete", function(){ alert("已經複製到剪下板!"+"\n"+content); }); }); }); </script>
因為我們需要複製到剪下板的按鈕可能是一個列表,所以使用each函式對每一個按鈕都進行繫結。
這裡需要注意的一點就是這個複製按鈕的id不能相同,是需要類似於copy_1,copy_2,copy_3這樣,
這個也是目前為止比較不爽的地方。
如果大家誰有更好的,請訊息我~