1.必須有先引入 jquery庫
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script>
2.js實現點擊復制的代碼
<script type="text/javascript"> $(function(){ $('#copy_input').zclip({ //copy_input表示 按鈕 path: 'ZeroClipboard.swf', copy: function(){ //復制內容 return $('#mytext').val(); //mytext表示 內容 }, afterCopy: function(){ //復制成功 // $("<span id='msg'/>").insertAfter($('#copy_input')).text('復制成功'); alert('復制成功'); } }); }); </script>
3.配置說明
path:swf的路徑(復制主要是用flash解決不同瀏覽器的復制)
copy:待復制的內容, 可以是靜態內容, 也可以 return 動態內容
beforeCopy:復制之前要做的function;
afterCopy:復制之后要做的function;
4.提供了3個方法
show:$(selected).zclip('show'); //復制功能有效
hide:$(selected).zclip('hide'); //復制功能無效
remove:$(selected).zclip('remove'); //完全移除復制功能
5.運行成功后,點擊復制按鈕,會彈出一個提示框,表示復制到剪切板生效了。 彈出框出現“Copied text to clipboard”英文字符,有點不符國人使用習慣,把它改為“成功復制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替換成“成功復制到剪切板”就可以了。
注意:當有 afterCopy()函數處理成功后的動作之后,就不會有第五步的彈框了
6.文件要放到服務器中才能運行,直接運行html文件是不行的
7.運行效果:效果演示