JS实现一键复制指定内容

经常会见到网站上各种“一键复制”的友好体验按钮，不局限于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>

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