利用clipboard.js复制粘贴JS插件实现页面特定文本按钮复制

前端开发教程 2022-03-20 0

我们在设计网站的时候，有些效果需要不断的提高用户体验。比如我们在页面中的微信号、电话号码、优惠码等信息，最好不要用户直接复制。如果能直接点击按钮直接复制效果还是比较好体验的。这里我们可以使用clipboard.js复制粘贴JS插件实现。

微信号 :  <span id="target">laobuluo</span> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
添加
</button>
<script>    
    $(document).ready(function(){       
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号：laobuluo 复制成功",1500); 
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>

这个仅仅是简单的示范，光有这个代码还是不行的，我们还需要最为主要的2个JS文件。

jquery.min.js

clipboard.min.js

我们需要下载且引用到网站中。

网盘下载（提取码：8m2j）

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章