最近项目需要，要实现复制黏贴功能，之前做好了只能实现自己页面的复制黏贴 （也不是真正的复制黏贴 是通过投机取巧的，就是复制的时候把数据存入数组，黏贴的时候再把数据取出来），没法实现把数据存入本地的剪贴板然后可以自己一个文档中实现粘贴，所以就找了一下资料，找到了主要的有四种方法： zeroclipboard 、document.execCommand("Copy")、clipboard、setData(). 找了些资料发现 第一种需要使用flash的 第四种浏览器的兼容性差只能在IE中使用 第三种由于未知原因自己的项目中没法使用所以只有使用的 clipboard 使用起来很简单 先下载插件 后把 clipboard.min.js导入 html 页面如下：
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script> 7<script type="text/javascript" src="https://my.oschina.net//u/3037878/blog/895962/clipboard.min.js"></script> 8function onclick111(){ 9 var clipboard = new Clipboard('.btn'); 10 clipboard.on('success', function(e) { 11 console.info('Action:', e.action); 12 console.info('Text:', e.text); 13 console.info('Trigger:', e.trigger); 14 15 e.clearSelection(); 16 }); 17 18 clipboard.on('error', function(e) { 19 console.error('Action:', e.action); 20 console.error('Trigger:', e.trigger); 21 }); 22 23 $(".btn").attr("data-clipboard-text","你要传的字符串"); 24 //$(".btn").click();（当由另一个点击事件触发的时候，实现让其自动点击） 25} 26</head> 27<body> 28 29<div style="display:none"> 30<button class="btn" data-clipboard-action="copy" data-clipboard-text="1" onclick="onclick111()"></button> 31</div> 32 33 34</body> 35</html>
还可以实现让一个元素的内容复制
把data-clipboard-text 替换给data-clipboard-target
具体如下：
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script> 7<script type="text/javascript" src="https://my.oschina.net//u/3037878/blog/895962/clipboard.min.js"></script> 8function onclick111(){ 9 var clipboard = new Clipboard('.btn'); 10 clipboard.on('success', function(e) { 11 console.info('Action:', e.action); 12 console.info('Text:', e.text); 13 console.info('Trigger:', e.trigger); 14 15 e.clearSelection(); 16 }); 17 18 clipboard.on('error', function(e) { 19 console.error('Action:', e.action); 20 console.error('Trigger:', e.trigger); 21 }); 22 23 $(".btn").attr("data-clipboard-text","你要传的字符串"); 24 //$(".btn").click();（当由另一个点击事件触发的时候，实现让其自动点击） 25} 26</head> 27<body> 28<textarea id="text">选择的内容</textarea> 29<div style="display:none"> 30<button class="btn" data-clipboard-action="copy" data-clipboard-target="#text" onclick="onclick111()"></button> 31</div> 32 33 34</body> 35</html>
需要隐藏的时候使用第一种方法 不需要隐藏的时候使用第二种