Clipboard.js实现点击自动复制内容的功能

Clipboard.js实现点击自动复制内容的功能

1.  点击非文本框，自动复制，代码如下

   value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span>
   <script src="clipboard.min.js"></script>
   <script>
       //init
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!');
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   </script>

    

2.  点击按钮，复制文本框内容，代码如下

   <!-- Target -->
   <input id="bar" value="Mussum ipsum cacilds...">
   <!-- Trigger -->
   <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
       Cut to clipboard
   </button>
   <script src="clipboard.min.js"></script>
   <script>
       //init
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!');
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   </script>

    

3.  点击按钮，复制html代码（new 对象的时候为其赋值即可），代码如下

   <button type="button" class="btn btn-default embedAddress" data-clipboard-action="copy" onclick="copyEmbed()">复制地址</button>
   
   <textarea id="embedAddrModel" style="display: none;">
       <iframe id="fram" height="428px" width="800px" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" src="网址"></iframe>
   </textarea>
   
   function copyEmbed() {
           var clipboard = new Clipboard('.btn',{
               text: function (trigger) {
                   var html = document.getElementById('embedAddrModel').innerHTML;
                   for (var i = 0; i < 2; i ++){
                       html = html.replace('&lt;','<');
                       html = html.replace('&gt;','>');
                   }
                   return html;
               }
           });
           clipboard.on('success',function (e) {
               alert("复制成功");
               e.clearSelection();
               clipboard.destroy();
           });
           clipboard.on('error',function (e) {
               alert("复制失败,请重新复制");
               clipboard.destroy();
           });
       }

    

　　 复制HTML，可以将HTML代码放到textarea中，防止页面解析此段代码；但是获取的HTML代码中的“<”，“>”会被解析成‘&lt;’,'&gt;'，所以需要将其转换回去；

　　 如果HTML代码执行的话，可以不放到textarea中，这样就不用转换HTML代码中的‘<’，‘>’,复制的就是所需的代码。

 

　　参考文档