JS把字符串存入系统剪贴板

最新推荐文章于 2024-03-20 14:58:12 发布

cigma2020

最新推荐文章于 2024-03-20 14:58:12 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/u/3037878/blog/895962

版权

最近项目需要，要实现复制黏贴功能，之前做好了只能实现自己页面的复制黏贴（也不是真正的复制黏贴是通过投机取巧的，就是复制的时候把数据存入数组，黏贴的时候再把数据取出来），没法实现把数据存入本地的剪贴板然后可以自己一个文档中实现粘贴，所以就找了一下资料，找到了主要的有四种方法： zeroclipboard 、document.execCommand("Copy")、clipboard、setData(). 找了些资料发现第一种需要使用flash的第四种浏览器的兼容性差只能在IE中使用第三种由于未知原因自己的项目中没法使用所以只有使用的 clipboard 使用起来很简单先下载插件后把 clipboard.min.js导入 html 页面如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./clipboard.min.js"></script>
function onclick111(){
	var clipboard = new Clipboard('.btn');
	clipboard.on('success', function(e) {
	    console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);

	    e.clearSelection();
	});

	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});
	
	$(".btn").attr("data-clipboard-text","你要传的字符串");
	//$(".btn").click();（当由另一个点击事件触发的时候，实现让其自动点击）
}
</head>
<body>
	
<div style="display:none">
<button class="btn" data-clipboard-action="copy" data-clipboard-text="1" onclick="onclick111()"></button>
</div>

	
</body>
</html>

还可以实现让一个元素的内容复制

把data-clipboard-text 替换给data-clipboard-target

具体如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./clipboard.min.js"></script>
function onclick111(){
	var clipboard = new Clipboard('.btn');
	clipboard.on('success', function(e) {
	    console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);

	    e.clearSelection();
	});

	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});
	
	$(".btn").attr("data-clipboard-text","你要传的字符串");
	//$(".btn").click();（当由另一个点击事件触发的时候，实现让其自动点击）
}
</head>
<body>
<textarea id="text">选择的内容</textarea>	
<div style="display:none">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#text" onclick="onclick111()"></button>
</div>

	
</body>
</html>

需要隐藏的时候使用第一种方法不需要隐藏的时候使用第二种

转载于:https://my.oschina.net/u/3037878/blog/895962

cigma2020

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS把字符串存入系统剪贴板

最近项目需要，要实现复制黏贴功能，之前做好了只能实现自己页面的复制黏贴（也不是真正的复制黏贴是通过投机取巧的，就是复制的时候把数据存入数组，黏贴的时候再把数据取出来），没法实现把数据存入本地的剪贴板然后可以自己一个文档中实现粘贴，所以就找了一下资料，找到了主要的有四种方法： z...
复制链接

扫一扫