在web开发中使用clipboard.js实现点击复制内容功能示例

前端  /  管理员 发布于 1年前   399

在web网站中实现点击复制内容是比较常规的功能，下面分享一下实现方式之一。

1.实现方式一

<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<a href="javascript:;" id="copyUrl" data-clipboard-text="！！！！！！！！！！！你已经复制到内容了!!!!!!!!!!!">复制链接</a>
<script type="text/javascript">
    var clipboard = new ClipboardJS('#copyUrl')
    clipboard.on('success', function(e) {
        alert("复制成功");
        e.clearSelection();
        console.log(e.clearSelection);
    });
    clipboard.on('error', function(e) {
        alert("当前浏览器不支持此功能，请手动复制。")
    });
</script>

2.实现方式二

copyToClipboard(text) {
  // 创建一个 textarea 元素
  const textarea = document.createElement('textarea');
  // 设置 textarea 的值为我们想要复制的文本
  textarea.value = text;
  // 将 textarea 添加到 DOM 中
  document.body.appendChild(textarea);
  // 选中 textarea 中的文本
  textarea.select();
  try {
    // 尝试复制文本
    document.execCommand('copy');
    console.log('复制成功');
  } catch (err) {
    console.log('复制失败', err);
  } finally {
    // 不管复制成功还是失败，最后都要清理 DOM
    document.body.removeChild(textarea);
  }
}

完，有兴趣可以自行测试，或者有更好的方式可以评论留言！