复制内容到系统剪切板，这里有最优雅的解决方案

Owen大前端时代 08-01 104

前言：

如今朋友们对“js获取剪切板内容”大概比较珍视，我们都想要了解一些“js获取剪切板内容”的相关资讯。那么小编同时在网上网罗了一些有关“js获取剪切板内容””的相关内容，希望大家能喜欢，朋友们快快来了解一下吧！

在页面上点击按钮就把内容复制到剪切板，然后用户可以直接粘贴使用了。这样的用户体验是不是很美好? 这当然也是产品经理向程序员提需求的理由。但是如何完成这个需求呢？

网上有很多解决方案，在尝试了各种所谓的方法之后，我找到了一个最好的解决办法--clipboardjs。这是一个JavaScript脚本插件，引用之后就能实现复制到系统剪切板的功能。使用clipboardjs的好处是你根本不用去考虑兼容性的问题，保证在主流的浏览器和操作系统上都是可以正常工作的。

相比于这种方式，那些用JavaScript原生实现的方式确实可以实现需求，但是经常出错。在实践中获得的教训告诉我们，如果有一个很好的，经过专业测试的，经过无数人检验的轮子，那就直接使用吧，别想炫技自己搞一个了。

clipboardjs的使用方式很简单，可以从官网下载脚本或者通过npm安装。

npm install clipboard --save

然后在你的页面中引入：

最后在使用之前要先初始化一下，你可以在任意JavaScript标签中执行，要在你使用复制功能之前：

new ClipboardJS('.btn');

上面的.btn是CSS选择器，就是把复制时间绑定到这个元素上，一旦点击就会执行复制操作。该元素还要设置一个属性来指定复制的内容：

data-clipboard-target 指定要复制内容的元素。点击复制后，该元素的内容会被复制到剪切板。

有需求的同学可以试一下，更多用法请参考官网。