经常会见到网站上各种“一键复制”的友好体验按钮,不局限于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>
到这里差不多就完成了,说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们,来指点和优化下代码,做出更好更方便的复制功能。