有的时候我们需要对某些元素进行复制。

下面是我使用的最简单的实现方法。亲测有效。

首先需要引入必要的类库:

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>


然后就在copy的按钮或元素里写上 data-clipboard-target 属性,这里的属性一般是ID,写法就是 data-clipboard-target="#copytext"

<p id="copytext">欢迎来到zhanzhang123.com</p><button click-type="copy" data-clipboard-target="#copytext">copy</button>


最后我们写上事件

$(function(){
	 $('[click-type="copy"]').each(function () {
		var clipboard = new Clipboard(this);
		clipboard.on('success', function (e) {
			alert('复制成功');
		});
		clipboard.on('error', function (e) {
			alert('复制失败');
		});
	});
})


就可以实现了。


当然 除了data-clipboard-targetd属性外,如果我们希望直接把要复制的内容写在复制按钮里,那改成 data-clipboard-text 就行了。比如

<button click-type="copy" data-clipboard-text="欢迎来到zhanzhang123.com">copy</button>

他们最终结果都是会把 欢迎来到zhanzhang123.com 复制到粘贴板里。


如果你希望你是用 cut(剪切) 而不是 copy 我们也可以在按钮里增加 data-clipboard-action="cut"来支持 比如:

<!-- Target -->
<textarea id="bar">欢迎来到zhanzhang123.com</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

点赞(0) 打赏

Comment list 共有 0 条评论

评论功能已关闭

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部
{__SCRIPT__}