通过JS实现一键复制指定内容教程

概述经常会见到网站上各种“一键复制”的友好体验按钮，不局限于code的复制，这样友好的体验，方便快捷的 *** 作对访客来说百利无一害。在网上搜索了一番关于“JS实

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

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

<div >

<div >

<input type="text" ID="mytxt1" value="点击右侧复制按钮复制" >

</div>

<div >

<button ID="copy_input1" >复制</button>

</div>

</div>

<div >

<div >

<input type="text" ID="mytxt2" value="点击右侧复制按钮复制" >

</div>

<div >

<button ID="copy_input2" >复制</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 ID="TKLS" type="button" data-clipboard-text="复制的内容">一键复制</button>

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

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的通过JS实现一键复制指定内容教程全部内容，希望文章能够帮你解决通过JS实现一键复制指定内容教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。