實用的插件：跨瀏覽器複製jQuery-zclip

Query-zclip是一個複製內容到剪貼板的jQuery插件，使用它咱們不用考慮不一樣瀏覽器和瀏覽器版本之間的兼容問題。jQuery-zclip插件須要Flash的支持，使用時記得安裝Adobe Flash Player。

一、jQuery-zclip插件官網
ZeroClipboard.swf下載地址

二、jQuery-zclip用法

//引入jQuery-zclip相關js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#cp-btn").zclip({
        path:'<%=path%>/resources/js/ZeroClipboard.swf', //記得把ZeroClipboard.swf引入到項目中 
        copy:function(){
            return $('#inviteUrl').val();
        }
    });
});
</script>

<div class="form-row">
    <div class="col-md-5">
        <input class="form-control" value="" id="inviteUrl"/>
    </div>
    <div class="col-md-1">
        <a href="javascript:void(0)" id="cp-btn"
            class="btn btn-default btn-block btn-clean">復&nbsp;&nbsp;制</a>
    </div>
</div>

 

配置說明
path:swf的路徑(複製主要是用flash解決不一樣瀏覽器的複製)
copy:待複製的內容, 能夠是靜態內容, 也能夠 return 動態內容
beforeCopy:複製以前要作的function;
afterCopy:複製以後要作的function;

提供了3個方法
show:$(selected).zclip('show');//複製功能有效
hide:$(selected).zclip('hide');//複製功能無效
remove:$(selected).zclip('remove');//徹底移除複製功能

三、演示效果
運行成功後，點擊複製按鈕，會彈出一個提示框，表示複製到剪切板生效了，以下：

彈出框出現「Copied text to clipboard」英文字符，有點不符國人使用習慣，把它改成「成功複製到剪切板」，在jquery.zclip.min.js文件中找到「Copied text to clipboard」替換成「成功複製到剪切板」就能夠了，效果以下：