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

麦子
麦子
管理员
1214
文章
0
粉丝
建站文档407字数 288阅读0分57秒阅读模式

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

利用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编辑器可以添加小按钮工具到编辑器。

投上你的一票
 
  • 本文由 麦子 发表于2024年10月11日 06:12:48
  • 转载请务必保留本文链接:https://www.zhujipingjia.com/clipboard.html
建站文档

WordPress 分类文章页指定模板设定方法

我们在开发 WordPress 主题的时候,我希望某个指定的分类文章页面要用到单独的模板,而不是共用一个 Single.php 模板。这里我们如何设置呢?在这里,我们常用2种方法。 第一种、在 Fun...