最简单的代码来实现网页按钮跨浏览器copy(复制)功能

有的时候我们需要对某些元素进行复制。下面是我使用的最简单的实现方法。亲测有效。首先需要引入必要的类库:<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard...

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

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

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

<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">欢迎来到hellojava.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="欢迎来到hellojava.com">copy</button>


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


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

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

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


具体的文档可以参照:https://clipboardjs.com/

  • 发表于 2018-03-10 17:40
  • 阅读 ( 176472 )
  • 分类:前端

条评论

请先 登录 后评论
不写代码的码农
三叔

422 篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除