js

最新推荐文章于 2025-07-28 22:31:20 发布

a-ui

最新推荐文章于 2025-07-28 22:31:20 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/zwldebug/article/details/104821246

js 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    复制注意点
  需要用户点击触发
  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>





                