网站通过 JS 代码实现点击按钮一键复制指定内容方法教程

我们有时候会看到,有的网站分享淘宝的淘口令或者网站文章时,可以点击一键复制。这样的操作对用户很友好,可以直接点击复制后打开对应的链接。当然,我们也可以利用点击一键复制功能,提升用户复制粘贴其他内容的体验。实现这一功能方法分享出来。

一、下载所需文件
一共包含两个文件:“clipboard.min.js”文件和 “css 样式”文件

下载后解压,得到clipboard.min.js 和 copy.css ,把两个文件上传到网站根目录。

二、引用 JS 与 css 文件
1,、引用 js 库,在当前主题的 footer.php 文件的末尾添加以下代码

<script src="这里替换成你clipboard.min.js的路径网址" type="text/javascript"></script>
<script>
var clipboard = new ClipboardJS('.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>

2、引用 css 样式,在当前主题的 header.php 模板添加以下代码

<link rel="stylesheet" href="这里替换成copy.css 的路径网址">

注意:一定要把上方代码中的文件路径替换成自己网站的文件路径。

三、文章中添加一键复制按钮
在编辑文章时,在需要的位置添加以下代码,就可以看到点击一键复制指定内容的按钮了。
添加到文章结尾分享处也是一样的方法,

<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容文本url">按钮显示的文字</button>

如果想要实现点击打开链接的同时,复制指定的内容,可以参考下方代码:

<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容文本"><a style="color: #ffffff;" href="需要打开的链接地址" onClick="copyUrl2()" target="_blank" rel="noopener noreferrer">按钮显示的文字</button>

补充说明
如果不需要我们提供的css样式,可以省略css操作的相关步骤。当然,您也可以使用自己修改喜欢的样式文件。



演示效果见文章页底部。


未经允许禁止转载
本文地址: https://www.77nn.net/4385.html
版权声明:本文为原创文章,版权归 讯沃blog 所有,未经允许,禁止任何单位或个人转载!

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝、微信、QQ扫一扫,即可进行扫码打赏哦

评论0

8 + 7 =

社交账号快速登录