H5移动端和PC端网页按钮点击复制输入框功能

ajaxPost293614

于 2018-12-13 10:00:57 发布

阅读量924

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 小技巧 HTML5

本文链接：https://blog.csdn.net/caoyan0829/article/details/84982831

小技巧同时被 3 个专栏收录

152 篇文章

订阅专栏

JavaScript

104 篇文章

订阅专栏

HTML5

41 篇文章

订阅专栏

本文介绍如何在移动端项目中引入clipboard.js插件，实现代码片段的一键复制功能。通过简单的HTML和JavaScript代码示例，展示了插件的使用方法及复制成功与失败的回调处理。

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

移动端要引入一个插件

地址：https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

<input id="copycode" class="main-code" readonly value="" >
<button class="main-btn" data-clipboard-target="#copycode" data-clipboard-action="copy">复制</button>

js：

var copyBtn = new ClipboardJS('.main-btn');
// console.log(copyBtn)
		
copyBtn.on("success",function(element){
	// 复制成功
	alert("已复制好，可贴粘");
	element.clearSelection();
});
copyBtn.on("error",function(element){
	//复制失败；
	console.log( "复制失败，请手动复制" )
});