利用Clipboard.js实现点击复制代码功能

建站技术180字数 715阅读2分23秒阅读模式

我们在设计网站体验的时候,是不是有可能设置防止复制内容,但是有些必须让用户复制的优惠券、代码如何避开可以让复制呢?这里,我们可以通过 Clipboard.js 第三方开源插件实现指定内容的可复制。

1、引入Clipboard.js

这里,我们可以从官方下载到Clipboard.js文件。

下载地址:https://github.com/zenorocha/clipboard.js/archive/master.zip

2、简易功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乐运维</title>
<script src=".../clipboard.min.js"></script>
</head>
<body>
<span>优惠码:<span id="myInput">要复制的代码</span></span>
<button id="copyInput">点击复制</button>
<script>
new ClipboardJS('#copyInput', {
    text: function(trigger) {
        return document.getElementById("myInput").innerHTML;
    }
}).on('success', function(e) {
   alert("复制成功");
   e.clearSelection();
}).on('error', function(e) {
    alert('Error!');
});
</script>
</body>
</html>

这是一个简易的可以复制指定代码的功能,我们可以根据需要修改对应样式。如果是指定CMS编辑器可以添加小按钮工具到编辑器。

投上你的一票
 
麦子
  • 本文由 麦子 发表于 2023年12月26日 08:08:00
  • 转载请务必保留本文链接:https://www.idcxen.com/clipboardjs-copytext.html
  • 点击复制功能