快捷導(dǎo)航

jQuery zclip插件實(shí)現(xiàn)跨瀏覽器復(fù)制功能

更新時(shí)間：2015年11月02日 15:21:30 投稿：lijiao

這篇文章主要介紹了jQuery zclip插件實(shí)現(xiàn)跨瀏覽器復(fù)制功能的方法，以及在實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題，感興趣的小伙伴們可以參考一下

jQuery-zclip是一個(gè)復(fù)制內(nèi)容到剪貼板的jQuery插件，使用它我們不用考慮不同瀏覽器和瀏覽器版本之間的兼容問(wèn)題。jQuery-zclip插件需要Flash的支持，使用時(shí)記得安裝Adobe Flash Player。

1、jQuery-zclip用法

//引入jQuery-zclip相關(guān)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引入到項(xiàng)目中 
    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">復(fù)&nbsp;&nbsp;制</a>
  </div>
</div>

配置說(shuō)明
path:swf的路徑(復(fù)制主要是用flash解決不同瀏覽器的復(fù)制)
copy:待復(fù)制的內(nèi)容, 可以是靜態(tài)內(nèi)容, 也可以 return 動(dòng)態(tài)內(nèi)容
beforeCopy:復(fù)制之前要做的function;
afterCopy:復(fù)制之后要做的function;

提供了3個(gè)方法
show:$(selected).zclip('show');//復(fù)制功能有效
hide:$(selected).zclip('hide');//復(fù)制功能無(wú)效
remove:$(selected).zclip('remove');//完全移除復(fù)制功能

2、演示效果
運(yùn)行成功后，點(diǎn)擊復(fù)制按鈕，會(huì)彈出一個(gè)提示框，表示復(fù)制到剪切板生效了，如下：

彈出框出現(xiàn)“Copied text to clipboard”英文字符，有點(diǎn)不符國(guó)人使用習(xí)慣，把它改為“成功復(fù)制到剪切板”，在jquery.zclip.min.js文件中找到“Copied text to clipboard”替換成“成功復(fù)制到剪切板”就可以了，效果如下：