JavaScript利用ZeroClipboard 复制到剪贴板。

最新推荐文章于 2024-09-14 18:52:56 发布

wleexi

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量1.1k

点赞数

分类专栏：页面 Javascript 前端文章标签： javascript function 前端复制到剪贴板

本文链接：https://blog.csdn.net/wleexi/article/details/16807753

版权

页面同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

Javascript

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

网上这样的文章太多了。因为是自己亲自做过。
想写下来记录下出现的一些问题。
首先需要在页面上导入ZeroClipboard.js和

<script type="text/javascript" src="/common/scripts/common/ZeroClipboard.js"></script>

JavaScript脚本:

<script type="text/javascript">
	var clip = new ZeroClipboard(document.getElementById('clip_button'),{moviePath:"/common/scripts/common/ZeroClipboard.swf"});

	//复制成功
	clip.on('complete',function(client,args){
		alert(args.text);
		document.getElementById('res').value = args.text;
	});

</script>

//copy failedclip.on( 'noflash', function ( client, args ) { alert("您的游览器不支持复制功能,请手动复制");})

HTML

<body>
等待被复制的内容:
<br/>
<textarea id="target" row="10">输入需要复制的内容</textarea>
<button id="clip_button" data-clipboard-target="target"><b>点我复制</b></button>
<br />
复制效果
<br />
<textarea id="res" row="10"></textarea>
</body>

需要注意的是出发复制事件的按钮属性data-clipboard-target，其值必须为要复制文本对象的id，比如上面的，textarea的id。

另外整个环境必须在服务器上搭建，本地环境是没有效果的。