双十一来临，如何给网站添加一键复制淘口令功能？丨本际云推荐

双十一来临，如何给网站添加一键复制淘口令功能？

双11优惠活动开启，如何为网站添加一键复制淘口令功能？

尊敬的读者，我是本际云服务器推荐网的小编小本本，想必大家都知道天猫双11活动已经启动啦！超级红包活动也随之开启！那么问题来了，如何给自己的网站添加一键复制淘口令功能呢？

双十一来临，如何给网站添加一键复制淘口令功能？

添加一键复制淘口令功能的三步骤

第一步：下载clipboard.js文件，这是一个可以实现纯JavaScript的浏览器内的内容复制到系统剪贴板的开源项目，在Github上可查看。

第二步：使用下载的clipboard.min.js文件，并将其上传到你的网站根目录中。然后在WordPress的footer.php的末尾添加以下代码：

<script src="/clipboard.min.js" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
    if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
        e.trigger.innerHTML = "复制成功";
        e.trigger.disabled = true;
        setTimeout(function() {
            e.trigger.innerHTML = "一键复制";
            e.trigger.disabled = false;
        },
        2000);
    }
});
clipboard.on('error',
function(e) {
    e.trigger.innerHTML = "复制失败";
});
</script>

其中，这段代码将给class为”itemCopy”的元素添加复制功能，当点击该按钮时，会将data-clipboard-text属性的内容添加到剪贴板中。

第三步：使用教程JS与CSS文件引用之后，在文章中的某个需要复制的地方放一个按钮就可以了，使用以下代码即可：

  <button class="itemCopy red_tkl button_tkl" id="TKLS"  type="button" data-clipboard-text="需要复制的内容">一键复制</button>

其中，class为”red_tkl button_tkl”的样式对添加的按钮进行了美化，让页面效果更加炫酷。

以上就是给网站添加一键复制淘口令功能的简单教程，希望对大家有所帮助。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7260.html

双十一来临，如何给网站添加一键复制淘口令功能？

双11优惠活动开启，如何为网站添加一键复制淘口令功能？

添加一键复制淘口令功能的三步骤

相关推荐