js 實現複製功能-Chrome下親測可用

      最近經過JS在Chrome實現複製功能,在網上找了不少例子都無論用,最後找到了解決方案,經過clipboard來實現。但願對前端不熟悉的夥伴們一點幫助。javascript

  • 先引入js
<script src="http://lib.baomitu.com/clipboard.js/1.7.1/clipboard.min.js"></script>
  • HTML代碼
<td id="copyDataButton" class="ui-pg-button ui-corner-all pdlr10 copy" data-clipboard-text="要複製的內容" title="複製連接">
     <div class="ui-pg-div">
         <span class="ui-icon ace-icon fa fa-repeat ui-icon-funs">
              <i>複製連接</i>
         </span>
     </div>
 </td>
  • JS代碼
<script type="text/javascript">
 var clipboard = new Clipboard('.copy');
    clipboard.on('success', function (e) {
        layer.msg("複製成功");

    });
    clipboard.on('error', function(e) {
        document.querySelector('.copy');
    });


    $("#copyDataButton").on("click",function(e){
       
        $(this).attr("data-clipboard-text","設置成你要複製的新內容");

    });
</script>
  • 到此結束,點擊copyDataButton按鈕,就能夠實現複製功能了,在Chrome下親測可用。
相關文章
相關標籤/搜索