JS实现一键复制指定内容

2021-07-30 0 1,263

经常会见到网站上各种“一键复制”的友好体验按钮,不局限于code 的复制,这样友好的体验,方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制,毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。今天分享一个实用的功能,通过点击事件复制一段文本到剪切板,在网上找了一些,整理了一下,方便需要的朋友使用。

方法一

<a id="copy" data-text="123456">复制文本</a>
<script type="text/javascript">
$(function(){
var clipboard = new Clipboard('#copy',{ 
text: function(trigger) { 
alert("复制成功!");
return trigger.getAttribute('data-text'); 
}
});
});
</script>

方法二

<div>
<span id="copyMy"> 复制我试试</span>
<button onClick="copyFn()">点击复制</button>
</div>
<script>
function copyFn() {
var val = document.getElementById('copyMy');
window.getSelection().selectAllChildren(val);
document.execCommand("Copy");
alert("已复制好,可贴粘。");

}
</script>

方法三

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<div class="copybox clearfix">
<div class="copybox-n1 clearfix">
<div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">
<input type="text" id="mytxt1" value="点击右侧复制按钮复制" class="n1input">
</div>
<div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px;_margin-left: 0">
<button id="copy_input1" class="n1-btn">复制</button>
</div>
</div>
<div class="copybox-n2 clearfix">
<div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">
<input type="text" id="mytxt2" value="点击右侧复制按钮复制" class="n1input">
</div>
<div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px; _margin-left:0">
<button id="copy_input2" class="n1-btn">复制</button>
</div>
</div>
</div>

方法四

1、下载 clipboard.js 文件。clipboard.js 是一个 github 上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

2、将以下代码放在 footer.php 中,其中 clipboard.min.js路径请自行修改。

<script src="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>

3、在 header.php 头部引入以下 amazeui.css 文件。以下 amazeui-2.css 文件引入的是无删减版,大家也可以使用压缩包里面的 amazeui.css 文件,自行选择即可。

<link rel="stylesheet" href="https://tu2.aitao779.com/amazeui-2.css " rel="external nofollow"  rel="external nofollow" >

4、在文章中引用按钮代码。在编写文章的时候,将代码放在合适的位置,把 data-clipboard-text 的值“复制的内容”修改成指定的内容即可。

<button class="itemCopy am-btn am-btn-warning am-round am-btn-xs" id="TKLS" type="button" data-clipboard-text="复制的内容">一键复制</button>

到这里差不多就完成了,说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们,来指点和优化下代码,做出更好更方便的复制功能。

收藏 (0) 打赏

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

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 技术教程 JS实现一键复制指定内容 https://www.xinke123.net/388.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关资源

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务