首页 » 资源分享 » HTML » 正文

网站实现点击复制功能



想要在网站中实现点击一个按钮,复制隐藏input或其他标签里面的值。这里试用clipboard.js 来实现,兼容各种浏览器。也有很多人无法复制隐藏input的内容,按我这种写法,完美!

1、首先下载clipboard.js,下载链接:https://github.com/zenorocha/clipboard.js,或直接引用其他cdn。

2、代码实现

<input type="hidden" id="content" value="复制的内容"/>
<input type="button" id="copy" value="请点击我复制"/>

< script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js">
< script>
//实例化 ClipboardJS对象;
var clipboard2 = new ClipboardJS('#copy', {
text: function() {
return $("#content").val();
}
});
clipboard2.on('success', function(e) {
console.log("已复制到剪贴板!");
});
clipboard2.on('error', function (e) {
console.log("复制到剪贴板失败!");
});
< /script>