使用clipboard.js实现复制文本内容到剪贴板

最新推荐文章于 2025-06-11 11:41:59 发布

eling-

最新推荐文章于 2025-06-11 11:41:59 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/79548657

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用clipboard.js库在主流浏览器（如Chrome 42+，Firefox 41+，IE 9+，Opera 29+，Safari 10+）中实现文本内容复制到剪贴板。主要步骤包括引入JS文件，通过"data-clipboard-action"（默认值为'copy'，可选'cut'）和"data-clipboard-target"属性指定要复制的元素，或者使用"data-clipboard-text"直接设置复制的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

1、使用方式：引入JS文件（下载地址：https://download.youkuaiyun.com/download/second_boy/10285129）

<script src="clipboard.js"></script>

2、具体获取方式代码如下：

<input id="getValue" type="text" value="helloWorld"></input>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#getValue">Copy</button>// 复制得到的值为：helloWorld
<script src="clipboard.min.js"></script>
<script>
	var clipboard = new Clipboard('.btn');
		clipboard.on('success', function(e) {
	    console.log(e);
	});
	clipboard.on('error', function(e) {
	    console.log(e);
	});
</script>

data-clipboard-action的值有两个：1、cut；2、copy 不写默认为copy。

ps：cut 只有在input和textarea元素里面才有效

data-clipboard-target为指向需要取值的节点

3、也可以data-clipboard-text指定的值，代码如下：

<a href="javascript:;" class="btn sp" data-clipboard-text="呵呵呵呵额鹅鹅鹅哈哈">点击复制</a>	// 复制得到的值为：呵呵呵呵额鹅鹅鹅哈哈
<script src="clipboard.min.js"></script>
<script>
	var clipboard = new Clipboard('.btn');
		clipboard.on('success', function(e) {
	    console.log(e);
	});
	clipboard.on('error', function(e) {
	    console.log(e);
	});
</script>