js

一键复制代码片段

最新推荐文章于 2025-12-08 09:18:56 发布

原创最新推荐文章于 2025-12-08 09:18:56 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用ClipboardJS库实现的代码片段复制功能，通过简单的HTML结构和JavaScript代码，可以轻松实现在网页上的代码复制，适用于各种编程教程或代码分享场景。

                    
                        
                    
                    复制注意点
  需要用户点击触发
  input需要可见

<div class="read-more" data-clipboard-target="#copy_text">
</div>
<input id="copy_text"  value="your_text" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<script>
    $(function () {
        //实例化 ClipboardJS对象;
       
            var copyBtn = new ClipboardJS('.read-more');
            copyBtn.on("success",function(e){
                // 复制成功
                console.log(e.text);
                console.log('复制成功');
                e.clearSelection();
            });
            copyBtn.on("error",function(e){
                //复制失败；
                console.log('复制失败');
                console.log( e.action )
            });
      
    })
 
</script>





                