经常会见到网站上各种“一键复制”的友好体验按钮，不局限于 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>
- <script type="text/javascript">
- $(function() {
- /*复制*/
- $('#copy_input1').zclip( {
- path : 'js/ZeroClipboard.swf',
- copy : function() {return $('#mytxt1').val();/*复制内容*/},
- afterCopy : function() {alert("复制成功");/*复制成功*/}
- });
- /*复制*/
- $('#copy_input2').zclip( {
- path : 'js/ZeroClipboard.swf',
- copy : function() {return $('#mytxt2').val();/*复制内容*/},
- afterCopy : function() {alert("复制成功");/*复制成功*/}
- });
- });
- </script>
方法四
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 ">
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>
到这里差不多就完成了，说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们，来指点和优化下代码，做出更好更方便的复制功能。
