复制网页指定内容怎么巧用clipboard，你应该这样做

现在由于网页内容是展现在网页上的，很多网站前端开发人员为了让客户复制自己单位或公司的相关信息，就得使用按钮命令让客户点击复制相关信息，但是有的小伙伴可能会想到JS原生复制代码，但是发现有的客户反馈并不能复制，那是因为有的浏览器支持，有的不支持，期中原因很多，大部分是不兼容导致的，因为不同浏览器商家内核不一样，浏览器设置的功能标准也不一样，所以，该考虑clipboard.js插件了，改插件兼容性还是可以的，现在几乎所有的网页前端用户都在用！

在使用之前，您得下载clipboard.JS插件，网络上很多，由于是国外插件，国内用户不一定可以下载到，但是国内中文网站还是可以下载安装包的；下面我讲解下如何使用该插件

第一，新建一个HTML文件，在这里我命名为demo.html

首先编写之前您的引用你下载的clipboard.js,引用方法<script src="路径/clipboard.js"></script>，在这里我的引用是这样的

clipboard.js文件放在JS文件夹下面，所以我是这样引用的

 

<script src="js/clipboard.js"></script>

第二、引用后，您需要写个按钮控件或者HTML标签按钮，我是这样写的

<div id="xycms_btn" data-clipboard-text="Hello word!"><span>点击复制</span></div>

第三、下面写段JS控制引用实例代码

<script>
      var xycms_btn = document.getElementById('xycms_btn');
      var clipboard = new ClipboardJS(xycms_btn);

      clipboard.on('success', function(e) {      
            alert('复制成功!');   
        }); 
    </script>

这样，您用浏览器打开您制作的demo.html文档，就会看到运行效果

点击就会提示复制成功，您找个文本粘贴就会粘贴好您复制的文档“hello Word！”，有的同学会问，找个文档在哪里设置的？你看下我贴的代码

 就这样，第一个引用并成功复制的案例就写好了，具体您可以根据您的需求更深一点去设计开发，核心都是一样的，唯一不一样的就是您设置的内容，位置，相关提示信息自己根据具体情况设计！