最近通过JS在Chrome实现复制功能,在网上找了很多例子都不管用,最后找到了解决方案,通过clipboard来实现。希望对前端不熟悉的伙伴们一点帮助。

  • 先引入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下亲测可用。
06-30 14:08